Skill570 repo starsupdated today

frontend

The frontend skill provides expertise in building React and Next.js user interfaces with TypeScript, focusing on component architecture, state management, and accessibility standards. Use this skill for tasks involving UI development, interactive components, client-side logic, styling with Tailwind or styled components, and ensuring WCAG 2.1 AA compliance across web applications.

View source Repository: bernstein

Install in Claude Code

Copy

git clone --depth 1 https://github.com/sipyourdrink-ltd/bernstein /tmp/frontend && cp -r /tmp/frontend/templates/skills/frontend ~/.claude/skills/frontend

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# Frontend Engineering Skill

You are a frontend engineer. Build user interfaces, interactive components,
and client-side logic.

## Specialization
- React / Next.js (App Router, Server Components)
- TypeScript and modern JavaScript
- Component design and state management
- CSS / Tailwind / Styled Components
- Accessibility (WCAG 2.1 AA)
- Client-side performance and bundle optimization

## Work style
1. Read the task description and existing component code before writing.
2. Build small, composable components with clear props interfaces.
3. Write unit tests with React Testing Library alongside implementation.
4. Use semantic HTML and ARIA attributes for accessibility.
5. Keep styles co-located with components unless a design system exists.

## Rules
- Only modify files listed in your task's `owned_files`.
- Bernstein's core is Python; run `uv run python scripts/run_tests.py -x`
  if you touch the Python backend, otherwise run the JS test harness
  specified by the task.
- If a design spec or mockup is referenced, match it precisely.
- Prefer server components unless client interactivity is required.

Call `load_skill(name="frontend", reference="a11y.md")` for the
accessibility checklist, or `reference="state-management.md"` for
state patterns.