code-frontend-library-react
Skill0 starsChanged 2 months agoMITView on GitHub
Implement React components for React UI Library: CSS pure + BEM + design tokens, TypeScript strict, tsup build, Turborepo monorepo. Use when creating new components, adding variants, or integrating with demo/storybook apps.
In this repository20 other files it gives its agents.
- AGENTS.mdAGENTS.md
- code-backend-nestjsSkill
- doc-changelog-generationSkill
- doc-design-generationSkill
- doc-domain-generationSkill
- doc-guardrail-generationSkill
- doc-policy-generationSkill
- doc-readme-generationSkill
- git-tbd-for-sddSkill
- git-worktrees-useSkill
- openspec-generate-baselineSkill
- openspec-init-configSkill
- security-auditSkill
- skill-masterSkill
- skill-test-evalsSkill
- test-cypress-cucumberSkill
- test-nestjs-jest-testing-moduleSkill
- test-nestjs-supertestSkill
- test-playwright-cucumberSkill
- test-react-testing-librarySkill
The file
We split this skill into the rules it gives an agent
1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 30
Use this skill when:
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Code Front-end Library-React Components (React UI Library)
Overview
Implement production-ready components for packages/ui following the project's strict conventions: plain CSS + CSS variables, BEM naming, two-layer token system, TypeScript strict, and Next.js App Router compatibility.
Capabilities:
- Creates new UI components and composite subparts (for example in
packages/ui/src/components/or in specified component path). - Adds variants or sizes to existing components.
- Adds Storybook stories (to
apps/storybookor in specified storybook path). - Adds demo pages (to
apps/demoor in specified demo path if a demonstration application exists). - Refactors components to the
--ui-*token system and makes them Next.js App Router compatible. - Implements the GREEN and REFACTOR phases of TDD.
Limitations:
- Testing is out of scope for this skill..
Prerequisites
Use this skill when:
- Creating a new UI component in
packages/ui/src/components/ - Adding a new variant or size to an existing component
- IMPLEMENT compound component sub-parts (e.g.,
CardHeader,CardBody) - Adding a component page/demo to
apps/demo - Adding Storybook stories to
apps/storybook - Refactoring a component to use the
--ui-*token system - Making a component Next.js App Router compatible (
"use client")
Stack & Architecture
| Concern | Technology |
| Framework | React 18.2+ (plain functions, no React.FC) |
| Language | TypeScript strict mode — no any |
| Styling | Plain CSS + CSS Variables (--ui-* prefix) |
| Class naming | BEM: .ui-component, .ui-component--modifier, .ui-component__element |
| Build | tsup → ESM + CJS + DTS + styles.css |
| Monorepo | Turborepo with packages/ui, apps/demo, apps/storybook |
| Theming | ThemeProvider + useTheme() + data-theme="dark" |
| Next.js | App Router compatible, "use client" on interactive components |
Non-Negotiable Rules
- No CSS-in-JS, no Tailwind, no CSS Modules — plain
.cssfiles only - Only semantic tokens in component CSS (
--ui-action-primary, not--ui-palette-brand-500) - No external runtime dependencies in
packages/ui(only exception:focus-trap-react) - TypeScript strict — export all public types, JSDoc on public props, no
any "use client"directive required on interactive components inindex.tstestIdprop is part of the public API — renderdata-testid={testId ?? "ui-{name}-{variant}"}- Validate prop values at runtime with
VALID_*const arrays +console.warnin dev
Checklist for a New Component
ComponentName/ComponentName.tsx— component function with typed propsComponentName/ComponentName.css— BEM classes using--ui-*semantic tokensComponentName/ComponentName.stories.tsx— Storybook v8 storiesComponentName/ComponentName.test.tsx— Vitest unit tests (separate skill)ComponentName/index.ts— re-export with"use client"if interactiveComponentName/types.ts— if props are complex (optional)- Export added to
packages/ui/src/index.ts ComponentNameDemo.tsxinapps/demo/src/components/ComponentNamePage.tsxinapps/demo/src/pages/- Route added in
apps/demo/src/App.tsx - Entry added in
apps/demo/src/components/SidebarDemo.tsx
Resources
- Constitution:
.specify/memory/constitution.md - Design tokens:
packages/ui/src/tokens/ - CSS entry:
packages/ui/src/styles.css - Public API:
packages/ui/src/index.ts - Button reference implementation:
packages/ui/src/components/Button/ - Input reference implementation:
packages/ui/src/components/Input/ - Card reference implementation:
packages/ui/src/components/Card/
References
For more details, consult these reference files (loaded on demand):
| Topic | Reference | Load When |
| Component Structure | references/component-structure.md | Creating or scaffolding any component |
| Design Tokens | references/design-tokens.md | Writing CSS, choosing colors, spacing, radius |
| Component Patterns | references/component-patterns.md | Compound components, forwardRef, controlled/uncontrolled |
| Storybook Patterns | references/storybook-patterns.md | Writing .stories.tsx files |
| Accessibility | references/accessibility-patterns.md | ARIA, keyboard nav, focus management |
| CSS Styling | references/css-styling-approaches.md | CSS conventions, BEM, CSS variable usage |
| Web Component Design | references/web-component-design.md | Component API design, composition, TypeScript typing |
| Responsive Design | references/responsive-design.md | Adaptive components (container queries), demo layouts, touch targets, fluid values |
| Visual Design Principles | references/visual-design-principles.md | Design decisions: spacing grid, color philosophy, typography hierarchy, shadows, border radius, anti-patterns |
| Animation & Transitions | references/animation-transitions.md | CSS transition standards, prefers-reduced-motion, spinner, hover/press patterns |
| Theming & Dark Mode | references/theming-dark-mode.md | ThemeProvider, useTheme(), themeScript, dark mode integration |
| Icons & SVG | references/icons-svg.md | Icon components, inline SVG, aria-hidden, decorative vs semantic |
These files are only loaded if the agent needs additional context.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.