Standardize styling APIs for CDS components across web and mobile platforms.
npx skills add https://github.com/coinbase/cds --skill component-styles
Please help me install this Agent Skill. Skill: component-styles Source: https://github.com/coinbase/cds/tree/main/.claude/skills/component-styles Command: npx skills add https://github.com/coinbase/cds --skill component-styles
This Skill provides a standardized way to add and manage styling APIs (styles, classNames, and static classNames) for CDS components, ensuring consistency and maintainability across the design system.
styles and classNames props for components.cds-ComponentName-selectorName).Use the component-styles skill to add the styles API to the Button component, ensuring all approved selectors are documented with JSDoc and static class names are implemented following the cds-ComponentName-selectorName convention.
High-intent search queries and answers about installing and using this skill.
To standardize component styling API implementation, identify styleable elements, generate styles and classNames props, and enforce naming conventions like cds-ComponentName-selectorName across web and mobile platforms.
Add static class names to web components by implementing the cds-ComponentName-selectorName pattern, which allows direct CSS targeting and must be verified through specific tests to ensure correct application.
The best way to document CSS selectors in a React design system is by using JSDoc comments to define and explain each styleable element and selector, ensuring clear usage guidelines and maintainability.
Mobile component styling uses a simplified approach compared to web components, which utilize static class names for CSS targeting, ensuring consistent styling API management without web-specific static class implementations.
Use the cds-ComponentName-selectorName naming convention for design system component selectors to ensure consistency, maintainability, and clear identification of styleable elements across the system.
Yes, you must update component documentation after implementing the styles API to reflect the newly added styles and classNames props, ensuring all approved selectors are properly recorded for developers.
AgentientDefine TypeScript interfaces with JSDoc comments for React component props.
jangtrinhConvert Tailwind-like animate-* classNames into Motion props at build time.
kleon6436Enforce CSS and Tailwind coding standards during code reviews.
snake-dev-teamStyle React interfaces with shadcn/ui components and Tailwind CSS.