Applies Tailwind v4 styling conventions with CSS @theme design tokens in Astro components.
npx skills add https://github.com/malikkotb/shellpluscore --skill tailwind-malikkotb
Please help me install this Agent Skill. Skill: tailwind Source: https://github.com/malikkotb/shellpluscore/tree/main/.agents/skills/tailwind Command: npx skills add https://github.com/malikkotb/shellpluscore --skill tailwind-malikkotb
<style> tags, and uncontrolled z-index values. This Skill enforces a single Tailwind-first convention so every component uses the same design tokens, spacing scale, and stacking rules. ## Core Features & Use Cases - Token-driven styling: All colors, fluid typography scales, spacing, and radii come from @theme blocks in src/styles/*.css, never hardcoded hex or px arbitrary values. - Stacking context discipline: Enforces isolate on parents of any z-* utility and keeps z-index within a compact z-1 to z-3 scale instead of arbitrary jumps like z-50. - Class management rules: Defines when to extract repeated class strings (three or more uses), defers ordering to Biome's useSortedClasses, and uses cx (tailwind-merge) for caller-supplied class overrides. - Use Case: When adding a new section to an Astro page, the Skill ensures you write mb-16 instead of mb-[16px], use text-headline-20 from the fluid type scale, and wrap any z-indexed element in an isolated parent. ## Quick Start Style this Astro component using the Tailwind conventions, using scale utilities and theme tokens instead of arbitrary values.High-intent search queries and answers about installing and using this skill.
Style Astro components with Tailwind utility classes directly in the markup, using design tokens declared in @theme blocks in src/styles/*.css. Tailwind loads once through the Web.astro layout, so utilities work on every page without additional imports.
Tailwind v4 uses CSS configuration instead of a JS config file. Declare tokens in @theme blocks, such as --radius-8 for rounded-8 or fluid type scales with clamp(), and chain imports from a single tailwind.css entry point.
In this codebase, no. The spacing scale is 1 unit equals 1px, so write mb-16 instead of mb-[16px]. The same applies to gap, inset, padding, and width utilities; border-radius uses the --radius-* tokens like rounded-8.
Z-index fails when elements compete across unrelated stacking contexts. Add isolate to the parent of any element using a z-* utility to create a predictable stacking context, and keep values within z-1 to z-3 instead of jumping to z-50.
Almost never. Reach for a style tag only when Tailwind genuinely cannot express the rule, state the reason in a comment, and treat it as rare. CMS rich text element styling already lives in src/styles/sanity-rich-text.css.
andersoncollabTransform design briefs into frontend code scaffolds with design tokens.
tak-broAudit live-site design quality against visual systems and accessibility standards.
woweyaIntegrate Stimulus controllers into Symfony projects using data-controller attributes.
Software-Design-ClubEnforce consistent CSS methodologies and design tokens across stylesheets.