Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add S3YED/appie-kit --skill agentic-webdesign-zephyrgit clone --depth 1 https://github.com/S3YED/appie-kitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/s3yed/appie-kit/agentic-webdesign-zephyr)<a href="https://agentmods.dev/skills/s3yed/appie-kit/agentic-webdesign-zephyr"><img src="https://agentmods.dev/badge/skills/s3yed/appie-kit/agentic-webdesign-zephyr.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00046 | $0.01119 |
| Opus 5 | $0.00023 | $0.00560 |
| Sonnet 5 | $0.00009 | $0.00224 |
| Haiku 4.5 | $0.00005 | $0.00112 |
Grade A, and why
agentic-webdesign-zephyr scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 114 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Zephyr Framework — Zero-JS Agentic Web Components
What it is
"The first UI framework built for AI agents." 14 interactive web components (modal, tabs, accordion, toast, combobox, carousel, select, dropdown, datepicker, infinite scroll, sortable, file upload, virtual list, etc.) with pure CSS interactions. Zero runtime JavaScript after initial ~7KB page load. MCP server gives AI agents typed tools to control live components — they don't generate HTML, they interact with existing components.
Quick start
# Scaffold new project
npx create-zephyr-framework my-app
cd my-app && npm start
# Or via CDN (zero build)
# Add two script tags, use components directly
Core Packages
| Package | Description |
|---|---|
zephyr-framework |
Core: 14 web components, CSS, agent API, A2UI catalog |
zephyr-framework-mcp |
MCP server: bridges Claude Desktop/Cursor/Windsurf to live components |
create-zephyr-framework |
CLI scaffolder with starter page |
MCP Tools (6 typed tools)
// Agents call these on live components
zephyr_get_state() → JSON snapshot of all component states
zephyr_get_schema() → Schema for all 14 components
zephyr_get_prompt() → LLM context for prompting
zephyr_act(selector, action, args?) → Execute action: open modal, switch tab, etc.
zephyr_describe(selector) → Deep inspect one component
zephyr_render(html) → Render HTML into page
Agent doesn't see raw HTML — it sees typed tools with structured I/O:
zephyr_act('#modal-demo', 'open') → { success: true }
zephyr_get_state() → [{ id: "modal-demo", state: "open", actions: ["close", "toggle"] }, ...]
Agent API (Browser)
// Direct browser access for JS-based agents
Zephyr.agent.getState() // Snapshot all components
Zephyr.agent.act('#id', 'action') // Act on component
Zephyr.agent.describe('#id') // Deep inspect
Zephyr.agent.render(html) // Render HTML
Zephyr.agent.compose(components) // Compose layout
Zephyr.agent.observe(callback) // Watch state changes
Zephyr.agent.record() / replay() // Record/replay interactions
Zephyr.agent.headless() // Toggle fast mode
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 114 lines · 46 tokens per session scan A 8bcd3427f280
agentic-webdesign-zephyr is a skill published in the GitHub repository S3YED/appie-kit (7 stars, last pushed 12d ago), licensed MIT. It adds 46 tokens to every session and 1,119 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
cache-components
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). PROACTIVE ACTIVATION: Use this skill automatically when working in Next.js projects that have cacheComponents: true in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best…
frontend-code-review
Trigger when the user requests a review of frontend files (e.g., .tsx, .ts, .js). Support both pending-change reviews and focused file reviews while applying the checklist rules.
clone-website
Reverse-engineer and clone a website in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a…
animation-patterns
Framer Motion patterns, page transitions, skeleton loading, scroll-linked animations, and gesture-based interactions for React.
accessibility-patterns
WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization.
component-library-patterns
Design system token management, component API design, Storybook, and visual regression testing patterns.