feat(astro-builder): css-conventions skill + design system overhaul (v1.2.0)#42
Open
pcamarajr wants to merge 6 commits into
Open
feat(astro-builder): css-conventions skill + design system overhaul (v1.2.0)#42pcamarajr wants to merge 6 commits into
pcamarajr wants to merge 6 commits into
Conversation
The `memory` MCP / personal-knowledge-cli scaffolds private,
user-local files into the repo working tree (`.claude/CLAUDE.md`
fence, `.claude/skills/{memory,import-memories,init-memory}/`).
Exclude them so a wayward `git add .` can't push a contributor's
private memory store config into this public marketplace repo.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Ports and adapts the css-modern-features skill from fe-nuance-nextjs-UAT into an astro-builder-native discipline skill. Fires whenever CSS is written, reviewed, or refactored — and before adding any JavaScript to a component. Enforces six disciplines: token usage, scoping & file location, class naming, selector & specificity limits, anti-Tailwind / anti-CSS-in-JS, and a Tier-1 modern-CSS feature checklist. Adds an Astro-native three-tier interactivity ladder (CSS → vanilla script → island) replacing the React-state ladder from the original. Tier-1 baseline with mandatory fallbacks for light-dark() and anchor positioning to keep older Safari users readable. Includes 8 reference files (color, layout, selectors, animation, typography, positioning, misc, components) loaded on demand for exact syntax and browser support floors. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Updates design-system.md.template and adds a new global.css.template so init scaffolds the full token surface the css-conventions skill expects: --color-*, --font-*, --text-*, --space-*, --radius-*, --shadow-*. global.css.template ships with the four canonical @layer declarations (reset, tokens, base, utilities), dark-mode overrides via prefers-color-scheme, focus-visible, prefers-reduced-motion, and tiny utilities (.sr-only, .skip-link). design-system.md.template becomes the human-readable index for global.css — documents each token namespace as a table and keeps component patterns (card, button, tag) referencing tokens, not raw values. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The project round now writes src/styles/global.css from the new template as part of Phase 3, alongside the existing .astro-builder/ artifacts. Phase 4 gains a validation step ensuring the four @layer declarations and all six token namespaces are present, and that BaseLayout imports global.css. Interview gathers the minimum input needed to populate every namespace (primary color, visual style, fonts, optional dark mode); the rest is derived (e.g. --color-primary-dark via color-mix in oklch). CLAUDE.md.template now includes a CSS conventions section that points new projects at the css-conventions skill, summarizing the discipline (tokens only, scoped <style>, no Tailwind, interactivity ladder). Status dashboard's "project" round completion check now requires src/styles/global.css alongside the .astro-builder/ files. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
audit/SKILL.md gains a new Step 4.5 — CSS conventions audit — that sweeps the codebase for violations of the css-conventions skill: !important, raw hex/rgb/hsl values outside global.css, Tailwind/utility frameworks, CSS-in-JS, preprocessors, .module.css files, <style is:global> in components, inline style="" with standard properties, ID selectors for styling, and nesting deeper than 2 levels. P0 for outright forbidden frameworks (Tailwind, CSS-in-JS, preprocessors). P1 for token / scoping violations. P2 for nesting / ID selectors. Step 1 also now loads design-system.md and global.css to learn the project's token names before sweeping. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Adds the css-conventions skill to the registry and documents it in both the plugin and root READMEs. Updates the "What gets generated by /init" section to include src/styles/global.css. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Ports the
css-modern-featuresskill fromfe-nuance-nextjs-UATinto an astro-builder-native discipline skill —css-conventions— that fires whenever CSS is written, reviewed, or refactored. Expands the init template surface so a fresh project ships with the token namespaces andglobal.csslayer structure the skill expects. Bumps astro-builder to 1.2.0.Decisions made up front (full interview in conversation):
--color-*,--font-*,--text-*,--space-*,--radius-*,--shadow-*). Raw values forbidden in those domains outsideglobal.css.src/styles/global.csswith@layer reset, tokens, base, utilities. Component CSS only in Astro scoped<style>blocks. No CSS Modules, no<style is:global>, no sibling.css, no preprocessors.light-dark()(always paired withprefers-color-schememedia query) and anchor positioning (non-critical UI only). Both reflect real failure modes for the ~12% of users on older Safari.<script>→ Astro island. The skill enumerates patterns for each tier (theme toggle, modals, copy-to-clipboard belong on tier 2; only stateful forms / real-time UI / interactive viz justify an island).auditskill sweeps for violations (Tailwind, CSS-in-JS,!important, raw colors outsideglobal.css, etc.).What's in each commit
feat(astro-builder): add css-conventions skill—SKILL.md+ 8 reference files (color, layout, selectors, animation, typography, positioning, misc, components).feat(astro-builder): expand design system to six token namespaces—design-system.md.templaterewrite + newglobal.css.templatewith the four canonical@layers.feat(astro-builder): wire init to scaffold global.css—projectround writessrc/styles/global.cssin Phase 3, validates in Phase 4;CLAUDE.md.templategains a CSS conventions section.feat(astro-builder): add CSS-conventions audit step—audit/SKILL.mdStep 4.5 with grep patterns.chore: bump astro-builder to 1.2.0— marketplace + READMEs.Test plan
/astro-builder:init projectin a fresh Astro repo — confirm it writessrc/styles/global.csswith all six namespaces and four@layersglobal.cssflags as incomplete/astro-builder:auditon a project with intentional violations (e.g. a!important, a raw hex color in a component<style>) — confirm Step 4.5 flags them at the right severitySKILL.mdand walk a sample CSS edit through it — verify the checklist is actionable🤖 Generated with Claude Code