agentsclimarketplace
Sign in

Frontend

Skill byerlikaya/claude-starter-kit/plugin/skills/frontend

Stack-agnostic frontend discipline (web · mobile · desktop): component structure, state, data fetching, loading/empty/error states, i18n, accessibility, performance. frontend-expert-csk applies it on every stack. Trigger phrases: "frontend", "screen", "component", "page", "UI", "state management", "interface"From its SKILL.md

Install
npx -y skills add byerlikaya/claude-starter-kit --skill frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 20 stars20 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

3.1 KB, 636 tokens by cl100k_base, as published. Nobody here has run it

Frontend Discipline (stack-agnostic)

Web (React/Next/Vue/Svelte/Angular), mobile (React Native/Flutter) or desktop — shared principles. The stack-specific "how" (native bridge, router choice, etc.) lives in the relevant project skill; this skill applies to all of them.

Architecture

  • Presentation / logic separation: component/view is pure and thin; business logic lives in the hook/composable/service layer.
  • Reusability: repeated UI is factored out; the prop contract is clear and typed.
  • Folder: feature-based (features/<name>/) — view, logic, and test together.

State & data

  • Local state first (useState/signal); if global is needed, the project's choice (store/context) — nothing imposed.
  • Data fetching: cache + error + loading states are considered; race/abort are handled.

State-complete UI (design it from the start)

Every data-bound view covers four states: loading · empty · error · full. Don't code only the "full" case; empty/error/loading are part of the experience.

i18n & accessibility (default, not decoration)

  • User-visible text comes from the language file (project languages); no hard-coded strings (i18n-integrity).
  • Meaningful labels/roles, sufficient contrast, keyboard/screen-reader access, appropriate touch/click target.

Visual & UX quality

This skill covers structure; the visual/UX design layer — hierarchy, spacing rhythm, typographic scale, a restrained color system, and polished states — lives in frontend-design. Apply it when the work is about how the interface looks and feels, not just how it's wired.

Responsive & performance

  • Works across the target screen/device matrix (responsive/adaptive).
  • Unnecessary renders (memo/callback), bundle size, lazy loading, virtualization for long lists.

Verify at runtime (contract)

Prove a change works by observing the running UI, structured — not by interpreting a screenshot. Have components emit data-verify-* state attributes, register verifiable units with fixtures + invariants (≥1 adversarial probe each), expose window.__verify, and adopt the PASS/FAIL/BLOCKED/SKIP taxonomy (when in doubt, FAIL). Then drive the browser to check it. The full convention: references/verify-contract.md.

DoD (this skill's contribution)

  • /simplify; no dead styles/unused props.
  • The four states are covered; i18n-integrity clean; accessibility passes the baseline matrix.
  • review-agent-csk clean.

Constraints

  • Surgical change; follow existing conventions, do not impose a stack/preference.
  • Do not present data the platform does not provide as if it existed; do not promise a capability that isn't there.
  • §4 applies: no AI trace or vendor template name in code/comments/strings.

What ships with it: 1 file

2.7 KB alongside SKILL.md

references/

Gives 0 of the 12 instructions most design frontend skills give in 636 tokens

Counted across 1,169 of the 1,878 authors here whose files we hold, read 2026-08-07

  • Use CSS variables for color consistencyin 72 of 1169, across 23 files
  • Commit to one bold aesthetic direction before codingin 72 of 1169, across 27 files
  • Match implementation complexity to the aesthetic visionin 70 of 1169, across 20 files
  • Add atmospheric background effects and texturesin 57 of 1169, across 9 files
  • Use unexpected spatial compositions and layoutsin 56 of 1169, across 8 files
  • Implement real working codein 55 of 1169, across 7 files
  • Vary themes and aesthetics across different designsin 48 of 1169, across 7 files
  • Launch chromium in headless modein 47 of 1169, across 4 files
  • Close the browser when donein 47 of 1169, across 4 files
  • Run provided scripts with help flag firstin 47 of 1169, across 4 files
  • Wait for network idle statein 47 of 1169, across 4 files
  • Use descriptive selectors for elementsin 47 of 1169, across 4 files

Said here and by no other author read

  • keep components thin and move logic to services
  • factor out repeated UI into typed reusable components
  • use feature-based folder structure
  • keep user-visible text in language files
  • maintain labels, roles, contrast, and keyboard access
  • support the target screen and device matrix

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.

Keep looking

Skills are one crate of 326,851. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.