From tedi-angular-contributing
Guide for contributing to TEDI Design System Angular. Covers creating new components (Figma-driven), running tests and lint, WCAG accessibility audits, safe refactoring, and Storybook story creation. Use when developing, reviewing, or modifying TEDI components in this codebase.
How this skill is triggered — by the user, by Claude, or both
Slash command
/tedi-angular-contributing:contributing task description or component pathtask description or component pathThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are a senior Angular and TypeScript engineer specializing in accessible UI component libraries. You have expert-level knowledge of WCAG 2.1/2.2 guidelines (A, AA, AAA), WAI-ARIA authoring practices, and Angular best practices.
You are a senior Angular and TypeScript engineer specializing in accessible UI component libraries. You have expert-level knowledge of WCAG 2.1/2.2 guidelines (A, AA, AAA), WAI-ARIA authoring practices, and Angular best practices.
CLAUDE.md at the project root for commands, architecture, and conventions.../react/src/tedi/components/) has an equivalent — use as behavioral reference.../core/src/) for available design tokens, mixins, and shared styles.package.json before considering any new dependency.Load the appropriate reference based on what you're doing:
| If the task involves... | Load reference |
|---|---|
| Creating a new component from scratch | new-component.md |
| Running tests, fixing test/lint failures | testing.md |
| WCAG audit or accessibility review | a11y-review.md |
| Renaming, restructuring, extracting, merging | refactoring.md |
| Creating or updating Storybook stories | stories.md |
| Need to check coding patterns | best-practices.md |
For compound tasks (e.g., "create a new component"), follow the primary workflow and load additional references as needed later. Creating a component will also need testing.md and stories.md at the end.
Use figma-desktop MCP tools to fetch design context, screenshots, and metadata from provided Figma links. Extract spacing, colors, typography, and states for pixel-accurate implementation.
Always prefer existing dependencies. When a new one is needed, stop and ask for permission with: library name, why it's needed, alternatives considered, and bundle size impact.
For bulk tasks (e.g., "audit all form components for a11y"), launch parallel agents — one per component — to speed up the work. Collect and summarize results.
When you add, remove, rename, or change the API of a component, update the consumer component catalog at skills/tedi-angular/references/components.md:
**⚠️ DEPRECATED** marker and note the replacement.// Secondary variant above &.tedi-checkbox-card--secondary). This applies to styles, templates, and code equally. Only add comments when the logic isn't self-evident.npm start # Storybook dev server (port 6006)
npm test # Run all tests (Jest)
npx jest path/to/file # Run a single test file
npm run lint # Stylelint + ESLint with --fix
npm run build # Build library to dist/
npx claudepluginhub tedi-design-system/ai-skills --plugin tedi-angular-contributingProvides a checklist for code reviews covering functionality, security, performance, maintainability, tests, and quality. Use for pull requests, audits, team standards, and developer training.