diff --git a/.agents/skills/frontend-design/SKILL.md b/.agents/skills/frontend-design/SKILL.md index 8656fda..11eeaf8 100644 --- a/.agents/skills/frontend-design/SKILL.md +++ b/.agents/skills/frontend-design/SKILL.md @@ -34,8 +34,6 @@ Work in two passes. First, brainstorm a short design plan based on the human's d Then review that plan against the brief before building: if any part of it reads like the generic default you would produce for any similar page (work through a similar prompt to see if you arrive somewhere similar) rather than a choice made for this specific brief — revise that part, say what you changed and why. Only after you've confirmed the relative uniqueness of your design plan should you start to write the code, following the revised plan exactly and deriving every color and type decision from it. -When writing the code, be careful of structuring your CSS selector specificities. It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like .section and a element-based selector like .cta). This can happen often with paddings/margins between sections. - Try to do a lot of this planning and iteration in your thinking, and only show ideas to the user when you have higher confidence it'll delight them. ## Restraint and self-critique diff --git a/.agents/skills/ux-ui/SKILL.md b/.agents/skills/ux-ui/SKILL.md index 883783c..06e6aa8 100644 --- a/.agents/skills/ux-ui/SKILL.md +++ b/.agents/skills/ux-ui/SKILL.md @@ -5,5 +5,6 @@ description: Use when creating or changing a user-facing interface. Applies the # UX/UI +- Style UI with Tailwind utilities. Share repeated UI through components and their variants, not custom CSS classes. Reserve CSS files for Tailwind setup, theme tokens, and styles utilities cannot express. - Shared visual values live in each application's established theme. Components consume semantic tokens instead of raw palette values; author theme colors in `oklch(...)`. - Browser-rendered apps use Playwright and `@davidvornholt/a11y-testing` for automated accessibility checks. Add or update coverage for routes and meaningful interaction states affected by the change.