Modern CSS
Skill ยืนยันแล้วProactively apply when creating design systems, component libraries, or any frontend application. Triggers on CSS Grid, Subgrid, Flexbox, Container Queries, :has(), @layer, @scope, CSS nesting, @property, @function, if(), oklch, color-mix, light-dark, relative color, @starting-style, scroll-driven animations, view transitions, anchor positioning, popover, customizable select, content-visibility, logical properties, text-wrap, interpolate-size, clamp, field-sizing, modern CSS, CSS architecture, responsive design, dark mode, theming, design tokens, cascade layers. Use when writing CSS for any web project, choosing layout approaches, building responsive components, implementing dark mode or theming, creating animations or transitions, styling form elements, or modernizing legacy stylesheets. Modern CSS features and best practices for building interfaces with pure native CSS.
This extension provides in-depth explanations and practical examples for advanced CSS features like Grid, Subgrid, Container Queries, `:has()`, `@layer`, `:is()/:where()`, scroll-driven animations, and `@property`. It emphasizes modern syntax, accessibility, performance optimizations, and patterns for building robust, maintainable stylesheets and design systems.
การติดตั้ง
npx skills add ccheney/robust-skillsเรียกใช้ Vercel skills CLI (skills.sh) ผ่าน npx — ต้องติดตั้ง Node.js ในเครื่อง และมี agent ที่รองรับ skills อย่างน้อยหนึ่งตัว (Claude Code, Cursor, Codex, …) ทั้งนี้สมมติว่า repo ใช้รูปแบบ agentskills.io
ส่วนขยายที่คล้ายกัน
Frontend Design
99Create distinctive, production-grade frontend interfaces with high design quality. Provides analysis tools for auditing existing designs and generation tools for creating color palettes, typography systems, design tokens, and component templates. Supports React, Vue, Svelte, and vanilla HTML/CSS. Use when building web components, pages, or applications. Keywords: design, UI, frontend, CSS, components, palette, typography, tokens, accessibility.
Frontend Design Skill
95Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution. Use when building websites, web applications, React/Vue components, dashboards, landing pages, or any web UI requiring both design consistency and aesthetic quality.
Frontend Design
98Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Make Interfaces Feel Better
95Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
react-is
98Brand checking of React Elements.
React Router Best Practices
98React Router performance and architecture patterns. Use when writing loaders, actions, forms, routes, or working with React Router data fetching. Triggers on tasks involving React Router routes, data loading, form handling, or route organization.