Menu
Styling discipline for any mechanism (utility framework, CSS-in-JS, vanilla) — tokens, states, responsive, no ad-hoc values.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Context engineering — memory navigation, textual graph traversal, progressive disclosure, recovery. Load when assembling context for a task or when lost.
Implementation-side security discipline — headers, dependencies, secrets, authz. Load for hardening work (sec-ops domain).
Commit conventions, branching, anchors in messages, and the git safety rules. Load for any git operation beyond status/diff.
Anti-generic-AI design discipline — bans, tells, and the slop test. Load for ANY new UI surface or visual redesign. Inspired by Impeccable (Apache 2.0).
Motion & animation discipline — purpose, performance, reduced-motion. Load when work involves animation, transitions or scroll effects.
Microcopy discipline — buttons, errors, empty/loading/success states, alt text. Voice and tone come from the project's memory, not from this skill.
| name | styling-discipline |
| description | Styling discipline for any mechanism (utility framework, CSS-in-JS, vanilla) — tokens, states, responsive, no ad-hoc values. |
Mechanism-agnostic. Whether the project uses a utility framework, CSS-in-JS or vanilla CSS custom properties (see memory-long §stack), the discipline is the same.
accent-lime may resolve to orange). ALWAYS verify the actual value in the token source before using — never trust the name347px, #3a7bd5) means a missing token — escalate to the design-system owner, don't inline itZero inline style attributes · zero style values not traceable to a token · contrast meets WCAG AA (4.5:1 text) · states verified by interaction, not assumption.