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 girijashankarj/cursor-handbook --skill component-creationgit clone --depth 1 https://github.com/girijashankarj/cursor-handbookWrote 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/girijashankarj/cursor-handbook/component-creation)<a href="https://agentmods.dev/skills/girijashankarj/cursor-handbook/component-creation"><img src="https://agentmods.dev/badge/skills/girijashankarj/cursor-handbook/component-creation.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00028 | $0.00732 |
| Opus 5 | $0.00014 | $0.00366 |
| Sonnet 5 | $0.00006 | $0.00146 |
| Haiku 4.5 | $0.00003 | $0.00073 |
Grade A, and why
component-creation 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 4d 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 — 87 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Skill: Create UI Component
Trigger
When the user asks to create a new UI component.
Prerequisites
- Project uses React (or Vue; adjust steps)
-
src/components/or equivalent exists - Testing framework configured (Jest, Vitest, etc.)
- Styling approach known (Tailwind, CSS Modules, etc.)
Steps
Step 1: Define Component
- Name the component (PascalCase)
- Define its purpose and responsibilities
- Identify parent and child components
- List props and their types
- Identify state requirements
Step 2: Create Component Directory
src/components/{category}/{ComponentName}/
├── {ComponentName}.tsx # Component implementation
├── {ComponentName}.test.tsx # Unit tests
├── {ComponentName}.stories.tsx # Storybook story (optional)
└── index.ts # Public export
Step 3: Define Props Interface
- Create TypeScript interface for props
- Add JSDoc documentation for complex props
- Set default values where appropriate
- Mark optional props with
?
Step 4: Implement Component
- Use functional component with hooks
- Destructure props in function signature
- Implement rendering logic
- Add error boundary if needed
- Handle loading, error, and empty states
Step 5: Add Accessibility
- Semantic HTML elements used
- ARIA attributes where needed
- Keyboard navigation works
- Focus management for modals/popups
- Color contrast meets WCAG 2.1 AA
Step 6: Add Styling
- Follow project styling approach
- Responsive across breakpoints
- Dark mode support
- Design token usage (no magic numbers)
- No inline styles (except dynamic values)
Step 7: Write Tests
- Renders correctly with default props
- Renders correctly with all prop combinations
- User interactions work (click, type, etc.)
- Accessibility tests pass
- Error states handled
Step 8: Create Export
- Export component from index.ts
- Export props interface
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.
- 4d ago First seen · 87 lines · 28 tokens per session scan A b673ca0654db
component-creation is a skill published in the GitHub repository girijashankarj/cursor-handbook (30 stars, last pushed 8d ago), licensed MIT. It adds 28 tokens to every session and 732 once invoked, about $0.0001 per session on Opus 5. 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-09-03.
Other skills, from other repositories
front-vitest
Depth for Vitest tests of front- React 19 SPAs when DOM, RTL, TanStack Query hooks, or TanStack Router route-tree tests are needed. USE WHEN: adding jsdom or testing-library, writing tsx render or renderHook tests, testing createMemoryHistory plus RouterProvider, Suspense UI, or React 19 act fixtures. DO NOT USE WHEN…
react-testing-library
React Testing Library mechanics for testing React components and hooks — query selection, async handling, user interaction, assertions, provider setup, and the anti-patterns that make tests brittle. Use for any test that renders a React component or a hook, including choosing between getBy/queryBy/findBy, userEvent…
component-scaffold-generator
Generates clean React/Vue component skeletons with TypeScript types, prop variants, styling hooks, test files, Storybook stories, and usage documentation. Use when users request "create a component", "scaffold component", "new React component", or "generate component boilerplate".
storybook-setup
Sets up Storybook for component documentation with controls, actions, accessibility testing, and visual regression. Use when users request "Storybook setup", "component documentation", "UI library", "component stories", or "design system docs".
component-test
Generate production-grade Vitest tests from HTML elements captured in DevTools. Two-phase workflow (analysis → generation) with edge case discovery.
frontend-testing
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.