feat(frontend-design): intentionality rules for design skills and agents#375
Merged
feat(frontend-design): intentionality rules for design skills and agents#375
Conversation
Integrate constraint-driven guidance into the three frontend-facing components so the model does not default to generic output (card grids, weak hierarchies, safe layouts) when direction is thin. distinctive-frontend-design skill: - Phase 1 requires surface type classification (landing vs app) and a written narrative brief (visual thesis, content plan, interaction thesis) before aesthetic exploration begins - Phase 2 enforces two typefaces max and brand-first hero scale - Phase 3 enforces one accent color (functional colors separate) - Phase 4 restructured around the 2-to-3 motion slot discipline (entrance, scroll, interaction) with decorative-only litmus - Phase 5 adds hero composition rules: one composition, no cards in hero, full-bleed by default, one job per section, hero image litmus - New "App vs Landing Page Rules" section captures Linear-style restraint for dashboards and narrative sequence for landing pages - Phase 6 validation checklist extended with the new constraints - anti-patterns.json adds component cliches, hero composition rules object, and motion discipline object for structured lookup ui-design-engineer agent: - New "Intentional UI Constraints" hardcoded behaviors block covering surface type, narrative brief, typography ceiling, accent discipline, landing vs app rule sets, and motion slot discipline - ANALYZE phase begins with surface type classification and narrative brief - Anti-rationalization table gains seven new entries - Blocker criteria adds surface type and real content gates react-portfolio-engineer agent: - New "Intentional Portfolio Design Constraints" block: show work first (no cards in hero), use real artwork from day one, apply the 2-to-3 motion slot rule, one accent only (work carries color) - ANALYZE phase adds real-content confirmation and hero selection - Anti-rationalization table gains five new entries
Addresses reviewer-perspectives feedback on PR #375: - Add Vocabulary block at the top of Instructions defining hero, full-bleed, narrative brief, surface type, Linear-style restraint, decorative-only motion, and brand override. Newcomers now encounter each term defined once before it appears as a gate. - Drop the pre-existing double-hyphen in Phase 1 Step 1 item 9 that leaked into this PR through the renumbering edit. Replaces with a clean sentence. - Phase 1 gate now explicitly links to "Step 4" for narrative brief so the forward reference is obvious. - Add "Skip-if-answered" note under the Phase 1 gate and in the ui-design-engineer Blocker Criteria section. If the user's original request already supplies surface type, product name, and the single promise, the agent does not re-interrogate for ceremony. - Extend the ui-design-engineer card rationalization row with explicit surface-type scoping so the app rule ("cards only when the card IS the interaction") does not collide with the landing page rule (no cards in hero). - Add a brand-override rationalization row to ui-design-engineer so agents follow explicit client brand guides rather than arguing with defaults. Defaults bend for stated client identity.
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
Integrates constraint-driven guidance from recent GPT-5.4 / Codex frontend design best practices into the three frontend-facing components of the toolkit. The core insight: every model defaults to generic output (card grids, weak hierarchies, safe layouts) when direction is thin; hard constraints push every decision toward intentionality.
Files changed (4):
skills/distinctive-frontend-design/SKILL.md— main methodology updateskills/distinctive-frontend-design/references/anti-patterns.json— new cliche entries + hero/motion data blocksagents/ui-design-engineer.md— new hardcoded behaviors block and tablesagents/react-portfolio-engineer.md— new portfolio constraints block and tablesKey rules introduced
Pre-work (Phase 1 additions):
Typography & color:
Hero composition (landing pages):
Motion discipline:
Apps vs landing pages:
Test plan