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 Cristhianzl/claude-skills-czl --skill building-frontend-uigit clone --depth 1 https://github.com/Cristhianzl/claude-skills-czlWrote 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/cristhianzl/claude-skills-czl/building-frontend-ui)<a href="https://agentmods.dev/skills/cristhianzl/claude-skills-czl/building-frontend-ui"><img src="https://agentmods.dev/badge/skills/cristhianzl/claude-skills-czl/building-frontend-ui/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/cristhianzl/claude-skills-czl/building-frontend-ui"><img src="https://agentmods.dev/badge/skills/cristhianzl/claude-skills-czl/building-frontend-ui.svg" alt="Reviewed on agentmods" width="80" 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.00000 | $0.02604 |
| Opus 5.5 | $0.00000 | $0.01042 |
| Sonnet 5.5 | $0.00000 | $0.00521 |
| Haiku 4.5 | $0.00000 | $0.00260 |
Grade A, and why
building-frontend-ui 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 1mo 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 — 109 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Building Frontend UI
A frontend change is good when it reuses what already exists, is accessible by default, handles every state (loading, error, empty, long content), performs under real data, and leaks no data to the client. This skill is framework-agnostic: the workflow and rules live here; framework-specific mechanics live in references/<framework>.md and are loaded only when relevant.
Read first (always)
List learnings/ and read every file relevant to the current task — project conventions, the design system, banned dependencies, and component patterns live there and override the defaults in this file. If a learning conflicts with this skill, the learning wins — mention it.
Starting from zero?
If there is no existing design to extend (new site, new product surface, greenfield page), read references/designing-from-scratch.md before Step 0 and deliver its design plan as text before any code: strategy (one measurable goal, one primary action) → structure (sitemap, wireframe, section jobs) → tokens → components → pages. Visual decisions (type, color, space, motion, the generic-page anti-patterns) follow references/design-craft.md. Before declaring from-scratch work done, run the Vibe Check + delivery scorecard in references/anti-vibe-coded.md and report item by item — it is the definition of done for greenfield UI.
When a design system already exists, the opposite applies: the existing tokens, components, and layout are the law (Step 0) — never introduce a parallel style, and never use the from-scratch rules to justify restyling what's already consistent. Only the functional layers of the anti-vibe audit still apply (states, dead clicks, semantics, mobile, a11y).
Step 0 — Audit before you build (do not skip)
Most bad frontend work is net-new code that should have been reuse. Before writing anything:
- Find the design system. Grep for the token/theme source — CSS custom properties (
--color-*,--space-*), atailwind.config, a theme file, design-token JSON. Use those tokens; never hardcode raw hex, px spacing, or font sizes in a component. Before defining any new color, sweep the existing palette and name the closest existing tokens — a new token that duplicates (or nearly duplicates) a color that already has a name is a defect, not a choice (hooks/check-design-tokens.pyflags this after the fact; the sweep comes first). - Find existing components and utilities. Grep/glob for a component that already does this (button, modal, field, table, empty-state) and reuse or extend it instead of creating a parallel one. Match the established prop and naming patterns.
- Find the i18n system, if any. Grep for a
locales/dir, i18n config, or translation calls (t(...),$t,useTranslation,FormattedMessage). If the project has one, every user-facing string goes through it — a hardcoded string in a translated app is a bug, and every new key must be added to all locale files (a key present in one language and missing in another ships broken UI). - Read the surrounding files to copy the project's conventions (file layout, styling approach, state approach, test location).
What ships with it
14 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- learnings/README.md 857 B
- references/accessibility.md 4.8 KB
- references/anti-vibe-coded.md 14 KB
- references/design-craft.md 5.4 KB
- references/designing-from-scratch.md 5.5 KB
- references/forms.md 1.7 KB
- references/performance.md 2.0 KB
- references/react.md 1.9 KB
- references/responsive.md 1.7 KB
- references/state-and-data.md 2.3 KB
- references/svelte.md 1.5 KB
- references/ux-writing.md 2.0 KB
- references/vue.md 1.6 KB
- references/web-components.md 1.6 KB
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.
- 1mo ago Changed 5de7ca98d56f
- 1mo ago Changed · +10 lines 91facd4d399d
- 1mo ago First seen · 99 lines · 0 tokens per session scan A 4538aae46e4a
building-frontend-ui is a skill published in the GitHub repository Cristhianzl/claude-skills-czl (5 stars, last pushed 1mo ago), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 2,604 tokens. 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
analytics-strategy
Design measurement frameworks including event taxonomy, KPI hierarchy, dashboard architecture, attribution models, and analytics implementation strategy. Use this skill whenever the user wants to plan analytics, design dashboards, build event taxonomies, define KPIs, set up tracking, or audit existing measurement.…
content-strategy
Develop a content strategy covering editorial positioning, content pillars, formats, calendar, governance, and topical authority planning. Use this skill whenever the user wants to plan a content program, define content pillars, build an editorial calendar, structure topic clusters, set up content governance, or align…
incident-response
Manage active production incidents through detection, triage, mitigation, communication, and resolution with structured roles and decision-making. Use this skill whenever the user has an active incident, a production issue, a service outage, a security incident, or needs to plan incident response procedures. Triggers…
stakeholder-communication
Communicate effectively with stakeholders across functions and seniority levels. Use this skill when writing status updates, preparing executive reviews, sharing technical decisions with non-technical audiences, managing up, communicating bad news, or designing the communication cadence for a project. Triggers on…
review-work
Post-implementation gate review: run manual QA on the real surface yourself, then launch ONE gate reviewer (never a panel) to audit goal, constraints, code quality, security, missed context, and QA evidence. Use before a PR handoff or when the user explicitly asks to review completed work.
agb-begriff-vorformuliert-305
Für AGB Begriff Vorformuliert 305: ordnet Norm, Beweislast und Gegenargument; Ergebnis: Prüfprodukt mit Risiko und nächstem Schritt. Fachgebiet: AGB-Recht-Prüfer. Route: agb-begriff-vorformuliert-305.