Guide UI and UX design decisions for web and mobile components.
npx skills add https://github.com/gfcampos1/my-skills --skill ui-design-gfcampos1
Please help me install this Agent Skill. Skill: ui-design Source: https://github.com/gfcampos1/my-skills/tree/main/skills/ui-design Command: npx skills add https://github.com/gfcampos1/my-skills --skill ui-design-gfcampos1
This Skill removes guesswork from visual implementation by guiding design decisions before development, ensuring consistent, accessible, and production-ready UI components and screens that align with the product context and existing theme.
Ask the skill to design a responsive finance dashboard card by describing the component, target platform, and any existing theme files so it can recommend styles, fonts, palettes, tokens, and a Tailwind JSX implementation.
High-intent search queries and answers about installing and using this skill.
To design accessible UI components with Tailwind CSS, you can generate recommended styles, typography, color palettes, and accessible design tokens. This process outputs production-ready Tailwind JSX examples and config snippets tailored to your specific component and existing theme files.
Setting up a design system for a SaaS dashboard involves interviewing the product context to suggest 2-3 design styles like Minimal or Material. It produces font pairings, accessible color palettes, and Tailwind config extensions to ensure consistent, production-ready UI components across your screens.
Yes, you can generate CSS design tokens for an existing web theme by applying UI design guidance to your component implementation. The process outputs consolidated CSS design tokens and Tailwind config extensions while strictly respecting the existing design system already present in your codebase.
Choosing typography and color palettes for a mobile-first finance app requires matching design styles to the product context. A UI design guide presents suitable font pairings and 3 color palette options, ensuring accessible token values tailored specifically for finance applications.
Yes, this UI design approach works for both web and mobile screens. It guides UX and UI design decisions across various contexts including finance, SaaS, mobile-first, marketing, and admin interfaces, producing tailored styles and production-ready component implementations for each specific platform.
Automated style recommendations for UI components are limited by the product context provided and existing theme files. Without accurate context regarding the target platform or current design system, the suggested styles, typography, and Tailwind JSX examples may not perfectly align with complex custom themes.
kyamsSRLBuild scalable design systems with Style Dictionary token pipelines and React theme providers.
p-o-ke-naeBuild scalable Tailwind CSS v4 design systems with CSS-first theming.
BenavidesMichaelCreate scalable Tailwind v4 design systems with @theme tokens and CVA components.
NinaVerdeTranslate design references into Flutter UI code with Dart widgets.
