Core components, design systems, tokens, forms, animations, and world-class brand design specs.
| Type | Name | When to use | Tags | Action |
|---|---|---|---|---|
| Skill | Color Contrast Checker | Ensuring every color pairing meets AA/AAA before merging UI changes. | A11yDesign TokensTesting | |
| Skill | Storybook Component Docs | Building a component library that needs interactive documentation and visual regression testing. | ReactDocumentationTesting | |
| Design | Developer Portfolio Theme | Personal developer sites, resume pages, and open-source project showcases. | PortfolioDark Mode | |
| Skill | Webhook Debugger & Inspector | Debugging webhook integrations during development, testing third-party callbacks, or monitoring production webhook health. | ReactDeveloper ExperienceTooling | |
| Design | Soft Corporate UI System | Enterprise SaaS, internal tools, B2B dashboards, and any product that needs to feel trustworthy. | CorporateSaaSProfessional | |
| Skill | Design Token Exporter | Syncing design tokens across codebase, design tools, and documentation — single source of truth. | Design TokensToolingTailwind | |
| Skill | API Request Builder | Building API playgrounds, developer tools, integration testing UIs, or API documentation with live 'Try It' consoles. | ReactDeveloper ExperienceTooling | |
| Skill | Responsive Image Pipeline | Optimizing image-heavy pages for Core Web Vitals — LCP, CLS, and bandwidth. | PerformanceImagesOptimization |