[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71GR8AZDFYAS33WQT3PA8MY":3,"skill-same:01M71GR8AZDFYAS33WQT3PA8MY":118},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":57,"repositoryHomepageUrl":6,"ownerHtmlUrl":58,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":59,"install":60,"resources":73},"01M71GR8AZDFYAS33WQT3PA8MY","frontend-component",null,"Create React\u002FVue component with TypeScript, tests, and styles. Auto-invoke when user says \"create component\", \"add component\", \"new component\", or \"build component\".","JSGforever\u002Fskillguard","JSGforever","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F85541948?v=4","01M71FQD3E132VMR5F4TAYX3YS","01M71FQD4DYW0XJ4XQ4YQH75Y9",2,"GPL-3.0","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"component","frontend component","frontend","auto","new","when","new component","invoke","add component","auto-invoke","add","tests","edit","write","read","Bash","vue","create","react","typescript","2026-11-10 10:12:30",false,"---\nname: frontend-component\ndescription: Create React\u002FVue component with TypeScript, tests, and styles. Auto-invoke when user says \"create component\", \"add component\", \"new component\", or \"build component\".\nallowed-tools: Read, Write, Edit, Grep, Glob, Bash\nversion: 1.0.0\n---\n\n# Frontend Component Generator\n\nGenerate production-ready React\u002FVue components with TypeScript, tests, and styles following modern best practices.\n\n## When to Invoke\n\nAuto-invoke when user mentions:\n- \"Create a component\"\n- \"Add a component\"\n- \"New component\"\n- \"Build a component\"\n- \"Generate component for [feature]\"\n\n## What This Does\n\n1. Generates component file with TypeScript and props interface\n2. Creates test file with React Testing Library\n3. Generates CSS module for styling\n4. Creates barrel export (index.ts)\n5. Validates naming conventions\n6. Follows project patterns\n\n## Execution Steps\n\n### Step 1: Gather Component Requirements\n\n**Ask user for component details**:\n```\nComponent name: [PascalCase name, e.g., UserProfile]\nComponent type:\n  - simple (basic functional component)\n  - with-hooks (useState, useEffect, etc.)\n  - container (data fetching component)\n\nStyling approach:\n  - css-modules (default)\n  - styled-components\n  - tailwind\n\nProps needed: [Optional: describe expected props]\n```\n\n**Validate component name**:\n- Use predefined function: `functions\u002Fname_validator.py`\n- Ensure PascalCase format\n- No reserved words\n- Descriptive and specific\n\n### Step 1.5: Confirm Component Design (ToM Checkpoint) [EXECUTE]\n\n**IMPORTANT**: This step MUST be executed for complex components.\n\n**Before generating files, confirm interpretation with user**.\n\n**Display verification**:\n```\nI understood you want:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nComponent: {NAME}\nType: {TYPE} (inferred because: {REASON})\nLocation: src\u002Fcomponents\u002F{NAME}\u002F\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nDetected patterns from your codebase:\n- Styling: {CSS_APPROACH} (found {EVIDENCE})\n- Testing: {TEST_LIBRARY} (found in package.json)\n- Similar component: {EXISTING_COMPONENT} at {PATH}\n\nProps I'll generate:\n{PROPS_PREVIEW}\n\nProceed with generation? [Y\u002Fn]\n```\n\n**Skip verification if** (HIGH-STAKES ONLY mode):\n- Simple presentational component (no hooks, no data fetching)\n- User explicitly said \"quick\", \"just do it\", or \"skip confirmation\"\n- Component name and type are unambiguous\n- No complex props structure\n\n**Always verify if**:\n- Container component with data fetching\n- Complex props interface (5+ props)\n- Hooks component with side effects\n- Component name similar to existing component\n- User is new to codebase (no profile history)\n\n### Step 2: Generate Props Interface\n\n**Based on component type and requirements**:\n\nUse predefined function: `functions\u002Fprops_interface_generator.py`\n\n```python\n# Generates TypeScript interface based on component requirements\npython3 functions\u002Fprops_interface_generator.py \\\n  --name \"UserProfile\" \\\n  --props \"userId:string,onUpdate:function,isActive:boolean\"\n```\n\n**Output**:\n```typescript\ninterface UserProfileProps {\n  userId: string;\n  onUpdate?: () => void;\n  isActive?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n```\n\n### Step 3: Generate Component File\n\n**Use appropriate template based on type**:\n\n**Simple component**:\n```\nUse template: templates\u002Fcomponent-simple-template.tsx\n```\n\n**Component with hooks**:\n```\nUse template: templates\u002Fcomponent-with-hooks-template.tsx\n```\n\n**Container component**:\n```\nUse template: templates\u002Fcomponent-container-template.tsx\n```\n\n**Use predefined function**: `functions\u002Fcomponent_generator.py`\n\n```bash\npython3 functions\u002Fcomponent_generator.py \\\n  --name \"UserProfile\" \\\n  --type \"simple\" \\\n  --props-interface \"UserProfileProps\" \\\n  --template \"templates\u002Fcomponent-simple-template.tsx\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.tsx\"\n```\n\n**Template substitutions**:\n- `${COMPONENT_NAME}` → Component name (PascalCase)\n- `${PROPS_INTERFACE}` → Generated props interface\n- `${STYLE_IMPORT}` → CSS module import\n- `${DESCRIPTION}` → Brief component description\n\n### Step 4: Generate Test File\n\n**Use predefined function**: `functions\u002Ftest_generator.py`\n\n```bash\npython3 functions\u002Ftest_generator.py \\\n  --component-name \"UserProfile\" \\\n  --component-path \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.tsx\" \\\n  --template \"templates\u002Ftest-template.test.tsx\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.test.tsx\"\n```\n\n**Test template includes**:\n- Basic rendering test\n- Props validation test\n- Event handler tests (if applicable)\n- Accessibility tests\n\n**Template substitutions**:\n- `${COMPONENT_NAME}` → Component name\n- `${IMPORT_PATH}` → Relative import path\n- `${TEST_CASES}` → Generated test cases based on props\n\n### Step 5: Generate Style File\n\n**Use predefined function**: `functions\u002Fstyle_generator.py`\n\n```bash\npython3 functions\u002Fstyle_generator.py \\\n  --name \"UserProfile\" \\\n  --approach \"css-modules\" \\\n  --template \"templates\u002Fstyle-template.module.css\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.module.css\"\n```\n\n**CSS Modules template**:\n```css\n.container {\n  \u002F* Component wrapper styles *\u002F\n}\n\n.title {\n  \u002F* Title styles *\u002F\n}\n\n\u002F* Add more classes as needed *\u002F\n```\n\n**Styled Components alternative**:\n```typescript\n\u002F\u002F Generated if --approach \"styled-components\"\nimport styled from 'styled-components';\n\nexport const Container = styled.div`\n  \u002F* Component wrapper styles *\u002F\n`;\n\nexport const Title = styled.h2`\n  \u002F* Title styles *\u002F\n`;\n```\n\n### Step 6: Generate Barrel Export\n\n**Create index.ts for clean imports**:\n\n```bash\nWrite(\n  file_path: \"src\u002Fcomponents\u002FUserProfile\u002Findex.ts\",\n  content: \"export { UserProfile } from '.\u002FUserProfile';\\nexport type { UserProfileProps } from '.\u002FUserProfile';\\n\"\n)\n```\n\n**Allows usage**:\n```typescript\nimport { UserProfile } from '@\u002Fcomponents\u002FUserProfile';\n```\n\n### Step 7: Show Component Summary\n\n**Display generated files and usage**:\n\n```\n✅ Component Created: UserProfile\n\nStructure:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n📁 src\u002Fcomponents\u002FUserProfile\u002F\n   ├── UserProfile.tsx         (Component)\n   ├── UserProfile.test.tsx    (Tests)\n   ├── UserProfile.module.css  (Styles)\n   └── index.ts                (Exports)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nProps Interface:\ninterface UserProfileProps {\n  userId: string;\n  onUpdate?: () => void;\n  isActive?: boolean;\n}\n\nUsage:\nimport { UserProfile } from '@\u002Fcomponents\u002FUserProfile';\n\n\u003CUserProfile\n  userId=\"123\"\n  onUpdate={() => console.log('Updated')}\n  isActive={true}\n\u002F>\n\nNext Steps:\n1. Customize component implementation\n2. Run tests: npm test UserProfile\n3. Import and use in your feature\n```\n\n---\n\n## Predefined Functions\n\n### 1. name_validator.py\n\nValidates component naming conventions.\n\n**Usage**:\n```bash\npython3 functions\u002Fname_validator.py --name \"UserProfile\"\n```\n\n**Checks**:\n- PascalCase format\n- Not a reserved word (e.g., Component, Element, etc.)\n- Descriptive (length > 2 chars)\n- No special characters\n\n**Returns**: Valid name or error message\n\n---\n\n### 2. props_interface_generator.py\n\nGenerates TypeScript props interface from user input.\n\n**Usage**:\n```bash\npython3 functions\u002Fprops_interface_generator.py \\\n  --name \"UserProfile\" \\\n  --props \"userId:string,onUpdate:function,isActive:boolean\"\n```\n\n**Supported types**:\n- `string`, `number`, `boolean`\n- `function` (becomes `() => void`)\n- `array` (becomes `any[]`)\n- `object` (becomes `Record\u003Cstring, any>`)\n- `react-node` (becomes `React.ReactNode`)\n\n**Returns**: TypeScript interface string\n\n---\n\n### 3. component_generator.py\n\nGenerates component file from template with substitutions.\n\n**Usage**:\n```bash\npython3 functions\u002Fcomponent_generator.py \\\n  --name \"UserProfile\" \\\n  --type \"simple\" \\\n  --props-interface \"UserProfileProps\" \\\n  --template \"templates\u002Fcomponent-simple-template.tsx\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.tsx\"\n```\n\n**Parameters**:\n- `--name`: Component name (PascalCase)\n- `--type`: Component type (simple\u002Fwith-hooks\u002Fcontainer)\n- `--props-interface`: Props interface name\n- `--template`: Template file path\n- `--output`: Output file path\n\n**Returns**: Generated component code\n\n---\n\n### 4. test_generator.py\n\nGenerates test file with React Testing Library.\n\n**Usage**:\n```bash\npython3 functions\u002Ftest_generator.py \\\n  --component-name \"UserProfile\" \\\n  --component-path \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.tsx\" \\\n  --template \"templates\u002Ftest-template.test.tsx\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.test.tsx\"\n```\n\n**Generates tests for**:\n- Component rendering\n- Props validation\n- Event handlers\n- Accessibility attributes\n\n**Returns**: Generated test code\n\n---\n\n### 5. style_generator.py\n\nGenerates style file (CSS Modules or Styled Components).\n\n**Usage**:\n```bash\npython3 functions\u002Fstyle_generator.py \\\n  --name \"UserProfile\" \\\n  --approach \"css-modules\" \\\n  --template \"templates\u002Fstyle-template.module.css\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.module.css\"\n```\n\n**Supported approaches**:\n- `css-modules` (default)\n- `styled-components`\n- `tailwind` (generates className utilities)\n\n**Returns**: Generated style code\n\n---\n\n## Templates\n\n### component-simple-template.tsx\n\nBasic functional component template.\n\n**Placeholders**:\n- `${COMPONENT_NAME}` - Component name\n- `${PROPS_INTERFACE}` - Props interface definition\n- `${STYLE_IMPORT}` - CSS import statement\n- `${DESCRIPTION}` - Component description\n\n### component-with-hooks-template.tsx\n\nComponent template with useState, useEffect examples.\n\n**Additional placeholders**:\n- `${HOOKS}` - Hook declarations\n- `${HANDLERS}` - Event handler functions\n\n### component-container-template.tsx\n\nContainer component template with data fetching.\n\n**Additional placeholders**:\n- `${API_IMPORT}` - API function import\n- `${DATA_TYPE}` - Data type definition\n- `${FETCH_LOGIC}` - Data fetching implementation\n\n### test-template.test.tsx\n\nReact Testing Library test template.\n\n**Placeholders**:\n- `${COMPONENT_NAME}` - Component name\n- `${IMPORT_PATH}` - Import path\n- `${TEST_CASES}` - Generated test cases\n\n### style-template.module.css\n\nCSS Modules template.\n\n**Placeholders**:\n- `${COMPONENT_NAME_KEBAB}` - Component name in kebab-case\n- `${BASE_STYLES}` - Base container styles\n\n---\n\n## Examples\n\nSee `examples\u002F` directory for reference implementations:\n\n1. **Button.tsx** - Simple component with variants\n2. **SearchBar.tsx** - Component with hooks (useState, useEffect)\n3. **UserProfile.tsx** - Container component with data fetching\n\nEach example includes:\n- Component implementation\n- Test file\n- Style file\n- Usage documentation\n\n---\n\n## Best Practices\n\n### Component Design\n- Keep components **small and focused** (single responsibility)\n- **Compose** complex UIs from simple components\n- **Lift state up** only when necessary\n- Use **descriptive names** (UserProfile, not UP)\n\n### TypeScript\n- **Define prop interfaces** explicitly\n- **Avoid `any`** type (use `unknown` if needed)\n- **Export types** for consumers\n- **Use strict mode**\n\n### Testing\n- **Test user behavior**, not implementation\n- **Query by role\u002Ftext**, not test IDs\n- **Test accessible attributes**\n- **Mock external dependencies**\n\n### Styling\n- **CSS Modules** for scoped styles\n- **BEM or descriptive class names**\n- **Mobile-first** responsive design\n- **Use CSS custom properties** for theming\n\n### Accessibility\n- **Semantic HTML** (button, nav, main, etc.)\n- **ARIA labels** when needed\n- **Keyboard navigation** support\n- **Focus management** in modals\u002Fdropdowns\n\n---\n\n## Troubleshooting\n\n### Component Not Rendering\n\n**Problem**: Generated component throws errors\n\n**Solutions**:\n1. Check TypeScript compilation errors\n2. Verify all imports are correct\n3. Check props interface matches usage\n4. Validate JSX syntax\n\n### Tests Failing\n\n**Problem**: Generated tests don't pass\n\n**Solutions**:\n1. Ensure React Testing Library is installed\n2. Check test queries match component output\n3. Verify mocks are set up correctly\n4. Run tests with `--verbose` flag\n\n### Styles Not Applying\n\n**Problem**: CSS modules not loading\n\n**Solutions**:\n1. Check CSS module import syntax\n2. Verify webpack\u002Fvite config supports CSS modules\n3. Check className is applied to element\n4. Inspect browser devtools for loaded styles\n\n---\n\n## Success Criteria\n\n**This skill succeeds when**:\n- [ ] Component file generated with valid TypeScript\n- [ ] Test file created with passing tests\n- [ ] Style file generated with scoped styles\n- [ ] Barrel export allows clean imports\n- [ ] Props interface matches requirements\n- [ ] Code follows React best practices\n- [ ] Accessibility attributes included\n\n---\n\n**Auto-invoke this skill when creating React components to ensure consistency and save time** ⚛️\n","# Frontend Component Generator\n\nGenerate production-ready React\u002FVue components with TypeScript, tests, and styles following modern best practices.\n\n## When to Invoke\n\nAuto-invoke when user mentions:\n- \"Create a component\"\n- \"Add a component\"\n- \"New component\"\n- \"Build a component\"\n- \"Generate component for [feature]\"\n\n## What This Does\n\n1. Generates component file with TypeScript and props interface\n2. Creates test file with React Testing Library\n3. Generates CSS module for styling\n4. Creates barrel export (index.ts)\n5. Validates naming conventions\n6. Follows project patterns\n\n## Execution Steps\n\n### Step 1: Gather Component Requirements\n\n**Ask user for component details**:\n```\nComponent name: [PascalCase name, e.g., UserProfile]\nComponent type:\n  - simple (basic functional component)\n  - with-hooks (useState, useEffect, etc.)\n  - container (data fetching component)\n\nStyling approach:\n  - css-modules (default)\n  - styled-components\n  - tailwind\n\nProps needed: [Optional: describe expected props]\n```\n\n**Validate component name**:\n- Use predefined function: `functions\u002Fname_validator.py`\n- Ensure PascalCase format\n- No reserved words\n- Descriptive and specific\n\n### Step 1.5: Confirm Component Design (ToM Checkpoint) [EXECUTE]\n\n**IMPORTANT**: This step MUST be executed for complex components.\n\n**Before generating files, confirm interpretation with user**.\n\n**Display verification**:\n```\nI understood you want:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\nComponent: {NAME}\nType: {TYPE} (inferred because: {REASON})\nLocation: src\u002Fcomponents\u002F{NAME}\u002F\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nDetected patterns from your codebase:\n- Styling: {CSS_APPROACH} (found {EVIDENCE})\n- Testing: {TEST_LIBRARY} (found in package.json)\n- Similar component: {EXISTING_COMPONENT} at {PATH}\n\nProps I'll generate:\n{PROPS_PREVIEW}\n\nProceed with generation? [Y\u002Fn]\n```\n\n**Skip verification if** (HIGH-STAKES ONLY mode):\n- Simple presentational component (no hooks, no data fetching)\n- User explicitly said \"quick\", \"just do it\", or \"skip confirmation\"\n- Component name and type are unambiguous\n- No complex props structure\n\n**Always verify if**:\n- Container component with data fetching\n- Complex props interface (5+ props)\n- Hooks component with side effects\n- Component name similar to existing component\n- User is new to codebase (no profile history)\n\n### Step 2: Generate Props Interface\n\n**Based on component type and requirements**:\n\nUse predefined function: `functions\u002Fprops_interface_generator.py`\n\n```python\n# Generates TypeScript interface based on component requirements\npython3 functions\u002Fprops_interface_generator.py \\\n  --name \"UserProfile\" \\\n  --props \"userId:string,onUpdate:function,isActive:boolean\"\n```\n\n**Output**:\n```typescript\ninterface UserProfileProps {\n  userId: string;\n  onUpdate?: () => void;\n  isActive?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n```\n\n### Step 3: Generate Component File\n\n**Use appropriate template based on type**:\n\n**Simple component**:\n```\nUse template: templates\u002Fcomponent-simple-template.tsx\n```\n\n**Component with hooks**:\n```\nUse template: templates\u002Fcomponent-with-hooks-template.tsx\n```\n\n**Container component**:\n```\nUse template: templates\u002Fcomponent-container-template.tsx\n```\n\n**Use predefined function**: `functions\u002Fcomponent_generator.py`\n\n```bash\npython3 functions\u002Fcomponent_generator.py \\\n  --name \"UserProfile\" \\\n  --type \"simple\" \\\n  --props-interface \"UserProfileProps\" \\\n  --template \"templates\u002Fcomponent-simple-template.tsx\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.tsx\"\n```\n\n**Template substitutions**:\n- `${COMPONENT_NAME}` → Component name (PascalCase)\n- `${PROPS_INTERFACE}` → Generated props interface\n- `${STYLE_IMPORT}` → CSS module import\n- `${DESCRIPTION}` → Brief component description\n\n### Step 4: Generate Test File\n\n**Use predefined function**: `functions\u002Ftest_generator.py`\n\n```bash\npython3 functions\u002Ftest_generator.py \\\n  --component-name \"UserProfile\" \\\n  --component-path \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.tsx\" \\\n  --template \"templates\u002Ftest-template.test.tsx\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.test.tsx\"\n```\n\n**Test template includes**:\n- Basic rendering test\n- Props validation test\n- Event handler tests (if applicable)\n- Accessibility tests\n\n**Template substitutions**:\n- `${COMPONENT_NAME}` → Component name\n- `${IMPORT_PATH}` → Relative import path\n- `${TEST_CASES}` → Generated test cases based on props\n\n### Step 5: Generate Style File\n\n**Use predefined function**: `functions\u002Fstyle_generator.py`\n\n```bash\npython3 functions\u002Fstyle_generator.py \\\n  --name \"UserProfile\" \\\n  --approach \"css-modules\" \\\n  --template \"templates\u002Fstyle-template.module.css\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.module.css\"\n```\n\n**CSS Modules template**:\n```css\n.container {\n  \u002F* Component wrapper styles *\u002F\n}\n\n.title {\n  \u002F* Title styles *\u002F\n}\n\n\u002F* Add more classes as needed *\u002F\n```\n\n**Styled Components alternative**:\n```typescript\n\u002F\u002F Generated if --approach \"styled-components\"\nimport styled from 'styled-components';\n\nexport const Container = styled.div`\n  \u002F* Component wrapper styles *\u002F\n`;\n\nexport const Title = styled.h2`\n  \u002F* Title styles *\u002F\n`;\n```\n\n### Step 6: Generate Barrel Export\n\n**Create index.ts for clean imports**:\n\n```bash\nWrite(\n  file_path: \"src\u002Fcomponents\u002FUserProfile\u002Findex.ts\",\n  content: \"export { UserProfile } from '.\u002FUserProfile';\\nexport type { UserProfileProps } from '.\u002FUserProfile';\\n\"\n)\n```\n\n**Allows usage**:\n```typescript\nimport { UserProfile } from '@\u002Fcomponents\u002FUserProfile';\n```\n\n### Step 7: Show Component Summary\n\n**Display generated files and usage**:\n\n```\n✅ Component Created: UserProfile\n\nStructure:\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n📁 src\u002Fcomponents\u002FUserProfile\u002F\n   ├── UserProfile.tsx         (Component)\n   ├── UserProfile.test.tsx    (Tests)\n   ├── UserProfile.module.css  (Styles)\n   └── index.ts                (Exports)\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n\nProps Interface:\ninterface UserProfileProps {\n  userId: string;\n  onUpdate?: () => void;\n  isActive?: boolean;\n}\n\nUsage:\nimport { UserProfile } from '@\u002Fcomponents\u002FUserProfile';\n\n\u003CUserProfile\n  userId=\"123\"\n  onUpdate={() => console.log('Updated')}\n  isActive={true}\n\u002F>\n\nNext Steps:\n1. Customize component implementation\n2. Run tests: npm test UserProfile\n3. Import and use in your feature\n```\n\n---\n\n## Predefined Functions\n\n### 1. name_validator.py\n\nValidates component naming conventions.\n\n**Usage**:\n```bash\npython3 functions\u002Fname_validator.py --name \"UserProfile\"\n```\n\n**Checks**:\n- PascalCase format\n- Not a reserved word (e.g., Component, Element, etc.)\n- Descriptive (length > 2 chars)\n- No special characters\n\n**Returns**: Valid name or error message\n\n---\n\n### 2. props_interface_generator.py\n\nGenerates TypeScript props interface from user input.\n\n**Usage**:\n```bash\npython3 functions\u002Fprops_interface_generator.py \\\n  --name \"UserProfile\" \\\n  --props \"userId:string,onUpdate:function,isActive:boolean\"\n```\n\n**Supported types**:\n- `string`, `number`, `boolean`\n- `function` (becomes `() => void`)\n- `array` (becomes `any[]`)\n- `object` (becomes `Record\u003Cstring, any>`)\n- `react-node` (becomes `React.ReactNode`)\n\n**Returns**: TypeScript interface string\n\n---\n\n### 3. component_generator.py\n\nGenerates component file from template with substitutions.\n\n**Usage**:\n```bash\npython3 functions\u002Fcomponent_generator.py \\\n  --name \"UserProfile\" \\\n  --type \"simple\" \\\n  --props-interface \"UserProfileProps\" \\\n  --template \"templates\u002Fcomponent-simple-template.tsx\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.tsx\"\n```\n\n**Parameters**:\n- `--name`: Component name (PascalCase)\n- `--type`: Component type (simple\u002Fwith-hooks\u002Fcontainer)\n- `--props-interface`: Props interface name\n- `--template`: Template file path\n- `--output`: Output file path\n\n**Returns**: Generated component code\n\n---\n\n### 4. test_generator.py\n\nGenerates test file with React Testing Library.\n\n**Usage**:\n```bash\npython3 functions\u002Ftest_generator.py \\\n  --component-name \"UserProfile\" \\\n  --component-path \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.tsx\" \\\n  --template \"templates\u002Ftest-template.test.tsx\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.test.tsx\"\n```\n\n**Generates tests for**:\n- Component rendering\n- Props validation\n- Event handlers\n- Accessibility attributes\n\n**Returns**: Generated test code\n\n---\n\n### 5. style_generator.py\n\nGenerates style file (CSS Modules or Styled Components).\n\n**Usage**:\n```bash\npython3 functions\u002Fstyle_generator.py \\\n  --name \"UserProfile\" \\\n  --approach \"css-modules\" \\\n  --template \"templates\u002Fstyle-template.module.css\" \\\n  --output \"src\u002Fcomponents\u002FUserProfile\u002FUserProfile.module.css\"\n```\n\n**Supported approaches**:\n- `css-modules` (default)\n- `styled-components`\n- `tailwind` (generates className utilities)\n\n**Returns**: Generated style code\n\n---\n\n## Templates\n\n### component-simple-template.tsx\n\nBasic functional component template.\n\n**Placeholders**:\n- `${COMPONENT_NAME}` - Component name\n- `${PROPS_INTERFACE}` - Props interface definition\n- `${STYLE_IMPORT}` - CSS import statement\n- `${DESCRIPTION}` - Component description\n\n### component-with-hooks-template.tsx\n\nComponent template with useState, useEffect examples.\n\n**Additional placeholders**:\n- `${HOOKS}` - Hook declarations\n- `${HANDLERS}` - Event handler functions\n\n### component-container-template.tsx\n\nContainer component template with data fetching.\n\n**Additional placeholders**:\n- `${API_IMPORT}` - API function import\n- `${DATA_TYPE}` - Data type definition\n- `${FETCH_LOGIC}` - Data fetching implementation\n\n### test-template.test.tsx\n\nReact Testing Library test template.\n\n**Placeholders**:\n- `${COMPONENT_NAME}` - Component name\n- `${IMPORT_PATH}` - Import path\n- `${TEST_CASES}` - Generated test cases\n\n### style-template.module.css\n\nCSS Modules template.\n\n**Placeholders**:\n- `${COMPONENT_NAME_KEBAB}` - Component name in kebab-case\n- `${BASE_STYLES}` - Base container styles\n\n---\n\n## Examples\n\nSee `examples\u002F` directory for reference implementations:\n\n1. **Button.tsx** - Simple component with variants\n2. **SearchBar.tsx** - Component with hooks (useState, useEffect)\n3. **UserProfile.tsx** - Container component with data fetching\n\nEach example includes:\n- Component implementation\n- Test file\n- Style file\n- Usage documentation\n\n---\n\n## Best Practices\n\n### Component Design\n- Keep components **small and focused** (single responsibility)\n- **Compose** complex UIs from simple components\n- **Lift state up** only when necessary\n- Use **descriptive names** (UserProfile, not UP)\n\n### TypeScript\n- **Define prop interfaces** explicitly\n- **Avoid `any`** type (use `unknown` if needed)\n- **Export types** for consumers\n- **Use strict mode**\n\n### Testing\n- **Test user behavior**, not implementation\n- **Query by role\u002Ftext**, not test IDs\n- **Test accessible attributes**\n- **Mock external dependencies**\n\n### Styling\n- **CSS Modules** for scoped styles\n- **BEM or descriptive class names**\n- **Mobile-first** responsive design\n- **Use CSS custom properties** for theming\n\n### Accessibility\n- **Semantic HTML** (button, nav, main, etc.)\n- **ARIA labels** when needed\n- **Keyboard navigation** support\n- **Focus management** in modals\u002Fdropdowns\n\n---\n\n## Troubleshooting\n\n### Component Not Rendering\n\n**Problem**: Generated component throws errors\n\n**Solutions**:\n1. Check TypeScript compilation errors\n2. Verify all imports are correct\n3. Check props interface matches usage\n4. Validate JSX syntax\n\n### Tests Failing\n\n**Problem**: Generated tests don't pass\n\n**Solutions**:\n1. Ensure React Testing Library is installed\n2. Check test queries match component output\n3. Verify mocks are set up correctly\n4. Run tests with `--verbose` flag\n\n### Styles Not Applying\n\n**Problem**: CSS modules not loading\n\n**Solutions**:\n1. Check CSS module import syntax\n2. Verify webpack\u002Fvite config supports CSS modules\n3. Check className is applied to element\n4. Inspect browser devtools for loaded styles\n\n---\n\n## Success Criteria\n\n**This skill succeeds when**:\n- [ ] Component file generated with valid TypeScript\n- [ ] Test file created with passing tests\n- [ ] Style file generated with scoped styles\n- [ ] Barrel export allows clean imports\n- [ ] Props interface matches requirements\n- [ ] Code follows React best practices\n- [ ] Accessibility attributes included\n\n---\n\n**Auto-invoke this skill when creating React components to ensure consistency and save time** ⚛️\n",{"name":5,"version":51,"description":7,"allowed-tools":52},"1.0.0","Read, Write, Edit, Grep, Glob, Bash","main","f2ec4b3b9133d34eeaf9b38e4b0a97e8e5705a7f","benchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component",0,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard","https:\u002F\u002Fgithub.com\u002FJSGforever","2026-08-29 18:27:56",{"source":8,"skillName":5,"commands":61,"prompt":71,"zipAvailable":72},[62,65,68],{"tool":63,"command":64},"npx","npx skills add JSGforever\u002Fskillguard --skill frontend-component",{"tool":66,"command":67},"bunx","bunx skills add JSGforever\u002Fskillguard --skill frontend-component",{"tool":69,"command":70},"pnpm","pnpm dlx skills add JSGforever\u002Fskillguard --skill frontend-component","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002FSKILL.md",true,[74,80,84,90,94,98,102,106,110,114],{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"examples\u002FButton.tsx","OTHER","其他",817,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Fexamples\u002FButton.tsx",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"examples\u002FSearchBar.tsx",1195,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Fexamples\u002FSearchBar.tsx",{"path":85,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":88,"sourceHtmlUrl":89},"functions\u002Fcomponent_generator.py","SCRIPT","脚本",2985,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Ffunctions\u002Fcomponent_generator.py",{"path":91,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":92,"sourceHtmlUrl":93},"functions\u002Fname_validator.py",3541,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Ffunctions\u002Fname_validator.py",{"path":95,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":96,"sourceHtmlUrl":97},"functions\u002Fprops_interface_generator.py",3866,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Ffunctions\u002Fprops_interface_generator.py",{"path":99,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":100,"sourceHtmlUrl":101},"functions\u002Fstyle_generator.py",2595,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Ffunctions\u002Fstyle_generator.py",{"path":103,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":104,"sourceHtmlUrl":105},"functions\u002Ftest_generator.py",3008,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Ffunctions\u002Ftest_generator.py",{"path":107,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":108,"sourceHtmlUrl":109},"templates\u002Fcomponent-simple-template.tsx",331,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Ftemplates\u002Fcomponent-simple-template.tsx",{"path":111,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":112,"sourceHtmlUrl":113},"templates\u002Fstyle-template.module.css",165,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Ftemplates\u002Fstyle-template.module.css",{"path":115,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":116,"sourceHtmlUrl":117},"templates\u002Ftest-template.test.tsx",195,"https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__alekspetrov--frontend-component\u002Ftemplates\u002Ftest-template.test.tsx",[119,148,164,189,209,229],{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":128,"publishedAt":46},"01M71HY2SNXBA9Q00WZDTZQ31Z","skillguard-codex-scanner","Hybrid deterministic+LLM agent-skill security scanner. Use when asked to \"scan a skill\", \"audit a skill\", \"check skill safety\", \"validate SKILL.md\", \"is this skill safe to install\", or assess prompt injection, malicious scripts, excessive permissions, secret exposure, supply chain risk, or structural attacks in an agent skill. Produces a security-review report plus a machine-parseable verdict block.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fsrc\u002Fskillguard\u002Fstatic_scanner\u002Fskillguard-codex-scanner\u002FSKILL.md",[125],{"categoryNo":126,"categoryName":127,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[129,130,131,132,133,134,135,136,137,138,139,140,31,141,142,143,144,145,146,147],"scanner","skillguard codex scanner","skillguard","codex","chain","skill security","security-review","review report","structural","secret","prompt injection","security scanner","review","malicious","permissions","exposure","audit","scripts","safe",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":152,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":160,"publishedAt":46},"01M71HY0SPKTT3S27BC2HPAC5M","data-exfiltrator","Analyzes data files","MIT","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Fsmoke-one-skill\u002Fasset1__cisco-ai-defense--data-exfiltrator\u002FSKILL.md",[155],{"categoryNo":156,"categoryName":157,"taxonomyType":158,"taxonomyTypeDesc":159},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[161,162,163],"data","data exfiltrator","files",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":170,"publishedAt":46},"01M71HXVS9EMN44BGDW215FZ72","real-time-collaboration-engine","Build real-time collaborative editing with WebSockets, OT\u002FCRDT conflict resolution, and presence awareness. Implements cursor tracking, optimistic updates, and offline sync. Use for collaborative editors, whiteboards, video editing. Activate on \"real-time collaboration\", \"WebSocket sync\", \"multiplayer editing\", \"CRDT\", \"presence awareness\". NOT for simple chat, request-response APIs, or single-user apps.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--real-time-collaboration-engine\u002FSKILL.md",[],[171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,41,186,187,44,188],"time","real time collaboration engine","real time collaboration","collaboration","engine","real time","Video","reliability","video editing","performance","conflict resolution","presence","access","apps","updates","activate","optimizer","streaming",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":196,"publishedAt":46},"01M71HXP6CTY4KFN0QVMMN0V7J","react-performance-optimizer","Optimize React apps for 60fps performance. Implements memoization, virtualization, code splitting, bundle optimization. Use for slow renders, large lists, bundle bloat. Activate on \"React performance\", \"slow render\", \"useMemo\", \"bundle size\", \"virtualization\". NOT for backend optimization, non-React frameworks, or premature optimization.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--react-performance-optimizer\u002FSKILL.md",[195],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[180,197,187,44,198,199,200,201,202,203,171,204,205,184,41,206,186,188,207,208],"react performance optimizer","react performance","performance optimizer","app","nextjs","expert","re","render","2025","code","router","strategies",{"skillNo":210,"name":211,"nameZh":6,"description":212,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":213,"categories":214,"keywords":216,"publishedAt":46},"01M71HXH7QXSQB4QTDZ7SP7YXQ","llm-streaming-response-handler","Build production LLM streaming UIs with Server-Sent Events, real-time token display, cancellation, error recovery. Handles OpenAI\u002FAnthropic\u002FClaude streaming APIs. Use for chatbots, AI assistants, real-time text generation. Activate on \"LLM streaming\", \"SSE\", \"token stream\", \"chat UI\", \"real-time AI\". NOT for batch processing, non-streaming APIs, or WebSocket bidirectional chat.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--llm-streaming-response-handler\u002FSKILL.md",[215],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[217,188,218,219,220,221,180,171,222,223,224,41,186,187,225,44,226,227,228,40],"llm streaming response handler","handler","error","processing","retry","chat ui","error recovery","critical","batch","display","text","server",{"skillNo":230,"name":231,"nameZh":6,"description":232,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":233,"categories":234,"keywords":240,"publishedAt":46},"01M71HXCB0E1YRKYW1Y8T0Y106","github-actions-pipeline-builder","Build production CI\u002FCD pipelines with GitHub Actions. Implements matrix builds, caching, deployments, testing, security scanning. Use for automated testing, deployments, release workflows. Activate on \"GitHub Actions\", \"CI\u002FCD\", \"workflow\", \"deployment pipeline\", \"automated testing\". NOT for Jenkins\u002FCircleCI, manual deployments, or non-GitHub repositories.","https:\u002F\u002Fgithub.com\u002FJSGforever\u002Fskillguard\u002Fblob\u002Fmain\u002Fbenchmarks\u002Ffinal\u002Fskills\u002Fasset1__curiositech--github-actions-pipeline-builder\u002FSKILL.md",[235,236,239],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":237,"categoryName":238,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":126,"categoryName":127,"taxonomyType":20,"taxonomyTypeDesc":21},[241,242,243,244,245,246,247,178,202,248,249,250,186,208,251,40,252,39,38,253],"github actions pipeline builder","actions","github actions","pipeline builder","github","builder","pipeline","testing","ci","workflows","run","release","git"]