Instruction file imported from bbc/simorgh (.github/instructions/component-standards.instructions.md). Copyright stays with the author.

Component Standards

Name: component-standards
Author: bbc

Technology Stack

React
TypeScript
SCSS Modules (see styling-standards.instructions.md)
Jest
Storybook

Component Requirements

Use functional components.
Use typed props.
Default export components.
Avoid side effects where possible.

Use existing components over native HTML elements:

#app/components/Heading
#app/components/Paragraph
#app/components/Text
#app/components/Image
#app/components/InlineLink

Structure

Each component must contain:

<ComponentName>/
├── index.tsx
├── index.module.scss
├── index.test.tsx
├── index.stories.tsx
├── metadata.json
└── README.md

Reference Implementations

Use src/app/components/Example as the canonical reference for component structure, styling, testing, Storybook configuration and documentation.

Testing

Import from:

src/app/components/react-testing-library-with-providers

{ "ocm": "1", "id": "bbc-simorgh-component-standards-instructions", "kind": "skill", "name": "component-standards", "description": "Component Standards", "publisher": "bbc", "version": "1.0.0", "capabilities": { "domains": [ "general" ], "tags": [ "skill-md", "github-instructions" ], "languages": [ "en" ] }, "quality_prior": 0.6, "examples": [ "Component Standards" ], "primary": false, "metadata": { "source": { "provider": "github-instructions", "repository": "https://github.com/bbc/simorgh", "path": ".github/instructions/component-standards.instructions.md", "ref": "284e412d193bd2ec4aa0efa31b052f88bf8c9d2e", "url": "https://github.com/bbc/simorgh/blob/284e412d193bd2ec4aa0efa31b052f88bf8c9d2e/.github/instructions/component-standards.instructions.md", "key": "bbc/simorgh/.github/instructions/component-standards.instructions.md" }, "applies_to": "src/app/components/**" }, "instructions": "# Component Standards\n\n## Technology Stack\n- React\n- TypeScript\n- SCSS Modules (see styling-standards.instructions.md)\n- Jest\n- Storybook\n\n## Component Requirements\n- Use functional components.\n- Use typed props.\n- Default export components.\n- Avoid side effects where possible.\n\nUse existing components over native HTML elements:\n- `#app/components/Heading`\n- `#app/components/Paragraph`\n- `#app/components/Text`\n- `#app/components/Image`\n- `#app/components/InlineLink`\n\n## Structure\nEach component must contain:\n\n```text\n<ComponentName>/\n├── index.tsx\n├── index.module.scss\n├── index.test.tsx\n├── i", "cost": { "context_tokens": 230 } }

component-standards

About

Component Standards

Technology Stack

Component Requirements

Structure

Reference Implementations

Testing

Use it

Manifest

Reviews