Add accessibility, performance, SEO, dark mode & code examples

#3Pull Requestaiagentwithdhruv 创建于 2026-03-16

## Summary - **+426 lines** across all 4 skills, addressing 7 gaps identified during review - Zero breaking changes — all additions are new sections appended to existing skills - taste-skill grows from 10 to 14 sections ## What's Added ### 1. Accessibility (WCAG 2.2 AA) — all skills `prefers-reduced-motion` enforcement, contrast ratios (4.5:1/3:1), focus indicators, ARIA labels, skip navigation, keyboard trap handling, semantic HTML, color independence. ### 2. Core Web Vitals — taste-skill + redesign-skill LCP < 2.5s, CLS < 0.1, INP < 200ms with specific implementation guidance. Bundle size awareness (Framer Motion ~30KB, GSAP ~25KB). ### 3. Responsive Images — taste-skill + redesign-skill `srcset`, `<picture>`, WebP/AVIF, lazy loading, explicit dimensions, Next.js `<Image>` component, `fetchpriority="high"` for hero images. ### 4. Dark/Light Mode System — taste-skill + soft-skill CSS custom properties, system preference detection, theme flash prevention, elevated surfaces pattern (not inverted shadows), image brightness adjustment. ### 5. SEO Meta Architecture — taste-skill + soft-skill + redesign-skill OG/Twitter meta tags, JSON-LD structured data, canonical URLs, sitemap/robots.txt, semantic headings, server-rendered critical content. ### 6. Code Examples — taste-skill 4 complete before/after code snippets: - Generic card → Premium Double-Bezel card with motion - Default button → Magnetic CTA with nested icon + spring physics - Static section → Staggered scroll entry with reduced motion support - Theme toggle component with system detection ### 7. Skill Relationship Clarity — soft-skill + README - soft-skill now has a "When to use this skill" section explaining when to pick soft-skill vs taste-skill - README has a comparison table for all 4 skills ## Pre-flight Checklists Updated Both taste-skill and soft-skill checklists now include accessibility, performance, SEO, and dark mode verification items. ## Test Plan - [ ] Verify taste-skill SKILL.md renders correctly in Cursor/Claude - [ ] Verify soft-skill "when to use" guidance is clear - [ ] Verify redesign-skill audit items are actionable - [ ] Verify output-skill multi-file rules don't conflict with existing behavior - [ ] Test code examples compile in a Next.js 15 + Tailwind v4 project Generated with [Claude Code](https://claude.com/claude-code) ## Summary by Sourcery Extend all skills with guidance for accessibility, performance, SEO, dark mode, and multi-file output workflows, plus clarify when to use each skill. New Features: - Add Core Web Vitals and image optimization requirements to taste-skill and redesign-skill. - Introduce dedicated accessibility, dark/light mode, and SEO/performance sections to taste-skill and soft-skill. - Provide concrete before/after UI code examples in taste-skill to demonstrate premium patterns and motion. - Document multi-file output handling and iterative change rules in output-skill. - Clarify when to choose each skill via a new section in soft-skill and a comparison table in the README. Enhancements: - Expand redesign-skill’s audit checklist with accessibility, performance, and SEO-focused checks and reorder its fix priority list to include them. - Augment pre-flight/pre-output checklists in taste-skill and soft-skill with accessibility, performance, dark mode, and SEO verification items. - Update README skill descriptions with the new capabilities and section counts.  --- ## Summary by cubic Adds WCAG 2.2 AA accessibility, Core Web Vitals performance, responsive images, dark/light mode, and SEO meta guidance across all skills, plus new code examples and clearer skill selection. All additions are backward‑compatible and included in updated checklists. - **New Features** - taste-skill: Adds sections for accessibility, Core Web Vitals, responsive images, dark/light mode, and SEO; includes 4 before/after code examples; expanded final checklist. - redesign-skill: Adds accessibility/performance/SEO audits and expands the fix priority to 10 steps (incl. `prefers-reduced-motion`, contrast, responsive images, preloads, canonical/OG tags). - soft-skill: Adds a “when to use this vs taste-skill” guide, accessibility rules, dark/light mode system, and SEO/performance guidance; checklist updated. - output-skill: Adds multi-file output rules (manifest, per-file blocks, path/import resolution, dependency install commands) and iterative change handling; quick check expanded. - README: Adds a skill comparison table and updates skill summaries and section counts (e.g., taste-skill now 14 sections). <sup>Written for commit e1d0a5174feb88ad629bdfdb0d010ae0167496ed. Summary will update on new commits.</sup>   ## Summary by CodeRabbit * **Documentation** * Enhanced accessibility guidance including WCAG 2.2 AA compliance standards. * Added Core Web Vitals and image optimization performance targets. * Expanded SEO best practices and metadata architecture guidance. * Introduced dark/light mode implementation guidelines. * Added procedural rules for multi-file outputs and iterative requests.

合并状态:未合并 2 条评论