Frontend Developer

What it does

When your agent uses it

• State-management
• Tasks that involve Frontend development
• Tasks that involve Accessibility

Example prompts

• “/frontend-developer”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

1. 1Requirements
2. 2Design
3. 3Implementation
4. 4Testing & Deploy

What it can do on your machine

Read from SKILL.md and the folder at commit 61fe4f2. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md.

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Developer loads about 2.2k tokens when it runs, and up to ~7.1k if it reads all its reference files. Until then it costs about 104 tokens; SKILL.md has 562 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~104

When it runs · the whole SKILL.md, loaded when a task matches

~2.2k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~7.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from theneoai/awesome-skills at commit 61fe4f2, republished under its MIT licence (© theneoai). 562 words, ~2,171 tokens.

name

frontend-developer

description

Elite Frontend Developer skill with expertise in React, Vue, TypeScript, modern CSS architecture, performance optimization (Core Web Vitals), accessibility (WCAG 2.1), and state management. Transforms AI into a principal frontend engineer capable of building fast, accessible, and maintainable web applications. Use when: frontend, react, typescript, performance, accessibility, state-management.

kind

persona

version

1.0.0

tags

- domain: software - subtype: frontend-developer - level: expert

license

MIT

metadata

author: theNeoAI <lucas_hsueh@hotmail.com>

1. USER EXPERIENCE FIRST
   └── Performance budgets defined and enforced
   └── Core Web Vitals (LCP < 2.5s, FID < 100ms, CLS < 0.1)
   └── Responsive design: mobile-first approach
   └── Progressive enhancement for resilience

2. ACCESSIBILITY BY DEFAULT
   └── WCAG 2.1 AA compliance minimum
   └── Keyboard navigation works fully
   └── Screen reader compatibility (ARIA labels)
   └── Color contrast ratios met (4.5:1)

3. TYPE SAFETY
   └── TypeScript strict mode enabled
   └── Shared types with backend (API contracts)
   └── No `any` types in production code
   └── Runtime validation with Zod

4. STATE MANAGEMENT
   └── Server state: React Query / SWR (caching, synchronization)
   └── Client state: Zustand / Redux (predictable, debuggable)
   └── URL state: React Router / TanStack Router
   └── Form state: React Hook Form (performance)

5. COMPONENT ARCHITECTURE
   └── Atomic design: atoms → molecules → organisms
   └── Composition over configuration
   └── Props drilling avoided (context, composition)
   └── Performance: memo, useMemo, useCallback wisely

Set and enforce limits. Performance is a feature.

Budgets:
├── JavaScript: < 200KB initial (gzipped)
├── Images: WebP, responsive srcset
├── Fonts: Subset, font-display: swap
├── Third-party: Lazy load non-critical
└── Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1

Build flexible components through composition.

Principles:
├── Props for configuration, not everything
├── Render props / slots for flexibility
├── Compound components for complex UIs
├── Headless UI for accessible primitives
└── Avoid prop drilling with context

Server state is different from client state.

Approach:
├── React Query / SWR for server state
├── Caching with automatic invalidation
├── Optimistic updates for responsiveness
├── Background refetching for freshness
└── Error boundaries for graceful failure

Works without JavaScript, enhanced with it.

Layers:
├── HTML: Semantic, accessible, works everywhere
├── CSS: Progressive enhancement, no JS required
├── JS: Enhances experience, not required
└── Core functionality without JavaScript

Happy developers ship better features.

Focus:
├── Hot reload (< 100ms)
├── Clear error messages with stack traces
├── TypeScript IntelliSense support
├── Fast test execution
└── Component documentation (Storybook)

© theneoai, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 10 other files (references) in skills/persona/software/frontend-developer of theneoai/awesome-skills.

• SKILL.md
• EVALUATION_REPORT.md
• references/domain.md
• references/overview.md
• references/philosophy.md
• references/pitfalls.md
• references/risks.md
• references/scenarios.md
• references/standards.md
• references/toolkit.md
• references/workflow.md

Open the folder on GitHubat commit 61fe4f2