@skill-graph/cli 0.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +247 -0
- package/LICENSE +200 -0
- package/NOTICE +62 -0
- package/README.md +398 -0
- package/SKILL_GRAPH.md +443 -0
- package/bin/skill-graph.js +374 -0
- package/docs/ADOPTION.md +117 -0
- package/docs/CONFORMANCE.md +66 -0
- package/docs/PRIMER.md +384 -0
- package/docs/QUICKSTART-30MIN.md +333 -0
- package/docs/ROUTING-METRICS.md +120 -0
- package/docs/SKILL-MD-FORMAT-COMPATIBILITY.md +127 -0
- package/docs/SKILL_AUDIT_CHECKLIST.md +199 -0
- package/docs/SKILL_AUDIT_LOOP.md +195 -0
- package/docs/SKILL_METADATA_PROTOCOL.md +609 -0
- package/docs/_archived/marketplace-publication-priority-2026-05-18.md +239 -0
- package/docs/adr/0001-predicate-set.md +69 -0
- package/docs/adr/0002-json-ld-context.md +82 -0
- package/docs/adr/0003-ontoclean-rigidity-tags.md +65 -0
- package/docs/adr/0004-persistent-identifiers.md +74 -0
- package/docs/adr/0005-freshness-consolidation.md +70 -0
- package/docs/adr/0006-revise-predicate-rename.md +105 -0
- package/docs/adr/0007-audit-loop-cadence.md +99 -0
- package/docs/adr/0008-skill-surface-split-and-curation-policy.md +93 -0
- package/docs/category-consumers.md +168 -0
- package/docs/concept-map.md +194 -0
- package/docs/diagrams/drift-states.mmd +21 -0
- package/docs/diagrams/manifest-pipeline.mmd +25 -0
- package/docs/diagrams/routing-harness.mmd +41 -0
- package/docs/diagrams/starter-graph.mmd +53 -0
- package/docs/field-decision-guide.md +315 -0
- package/docs/field-rationale.md +211 -0
- package/docs/field-reference.generated.md +624 -0
- package/docs/field-reference.md +1426 -0
- package/docs/glossary.md +190 -0
- package/docs/head-noun-glossary.md +63 -0
- package/docs/images/audit-phases.png +0 -0
- package/docs/images/drift-states.png +0 -0
- package/docs/images/graded-mode.png +0 -0
- package/docs/images/manifest-pipeline.png +0 -0
- package/docs/images/routing-harness.png +0 -0
- package/docs/images/skill-anatomy.png +0 -0
- package/docs/images/starter-graph.png +0 -0
- package/docs/images/system-model.png +0 -0
- package/docs/integrations/github-actions.md +155 -0
- package/docs/manifest-field-mapping.md +443 -0
- package/docs/marketplace-publication-queue.generated.md +240 -0
- package/docs/marketplace-release-agent-prompt.md +82 -0
- package/docs/marketplace-skill-candidate-list.md +272 -0
- package/docs/marketplace-syndication.md +222 -0
- package/docs/migration-sample-review.md +155 -0
- package/docs/migrations/v4-to-v5.md +168 -0
- package/docs/migrations/v5-to-v6.md +221 -0
- package/docs/name-exceptions.yaml +37 -0
- package/docs/plans/marketplace-p1-public-migration-plan.md +41 -0
- package/docs/plans/multi-root-workspace.md +148 -0
- package/docs/plans/scripts-roadmap.md +107 -0
- package/docs/plans/v4-schema-bump.md +160 -0
- package/docs/plans/wave-2-extraction.md +122 -0
- package/docs/positioning-vs-marketplaces.md +175 -0
- package/docs/proposals/skill-audit-loop-positioning.md +160 -0
- package/docs/quality-doctrine.md +138 -0
- package/docs/recommended-skills.md +150 -0
- package/docs/research/skill-comprehension-eval-research.md +1830 -0
- package/docs/research/skill-retrieval-evidence.md +66 -0
- package/docs/skill-metadata-protocol.md +471 -0
- package/docs/skills-sh-maintainer-cleanup-request.md +80 -0
- package/examples/audits/a11y/findings.md +52 -0
- package/examples/audits/a11y/scorecard.md +21 -0
- package/examples/audits/a11y/verdict.md +44 -0
- package/examples/audits/debugging/findings.md +59 -0
- package/examples/audits/debugging/scorecard.md +22 -0
- package/examples/audits/debugging/verdict.md +33 -0
- package/examples/audits/documentation/findings.md +59 -0
- package/examples/audits/documentation/scorecard.md +22 -0
- package/examples/audits/documentation/verdict.md +33 -0
- package/examples/evals/a11y.json +140 -0
- package/examples/evals/api-design.json +52 -0
- package/examples/evals/code-review.json +52 -0
- package/examples/evals/data-modeling.json +52 -0
- package/examples/evals/database-migration.json +52 -0
- package/examples/evals/debugging.json +118 -0
- package/examples/evals/dependency-architecture.json +52 -0
- package/examples/evals/design-system-architecture.json +52 -0
- package/examples/evals/error-tracking.json +52 -0
- package/examples/evals/event-contract-design.json +52 -0
- package/examples/evals/form-ux-architecture.json +52 -0
- package/examples/evals/framework-fit-analysis.json +52 -0
- package/examples/evals/graph-audit.json +139 -0
- package/examples/evals/information-architecture.json +52 -0
- package/examples/evals/interaction-feedback.json +52 -0
- package/examples/evals/interaction-patterns.json +52 -0
- package/examples/evals/layout-composition.json +52 -0
- package/examples/evals/lint-overlay.json +117 -0
- package/examples/evals/microcopy.json +52 -0
- package/examples/evals/observability-modeling.json +52 -0
- package/examples/evals/pattern-recognition.json +96 -0
- package/examples/evals/performance-engineering.json +52 -0
- package/examples/evals/refactor.json +128 -0
- package/examples/evals/semiotics.json +52 -0
- package/examples/evals/skill-infrastructure.json +96 -0
- package/examples/evals/skill-router.json +140 -0
- package/examples/evals/skill-router.routing.json +113 -0
- package/examples/evals/system-interface-contracts.json +52 -0
- package/examples/evals/task-analysis.json +52 -0
- package/examples/evals/testing-strategy.json +118 -0
- package/examples/evals/type-safety.json +249 -0
- package/examples/evals/visual-design-foundations.json +52 -0
- package/examples/evals/webhook-integration.json +52 -0
- package/examples/exports/a11y.skill-md.md +80 -0
- package/examples/exports/debugging.skill-md.md +80 -0
- package/examples/exports/refactor.skill-md.md +78 -0
- package/examples/exports/testing-strategy.skill-md.md +81 -0
- package/examples/projects/markdown-static-site/README.md +115 -0
- package/examples/projects/markdown-static-site/skills/content-source-router/SKILL.md +131 -0
- package/examples/projects/markdown-static-site/skills/image-optimization-pipeline-config/SKILL.md +132 -0
- package/examples/projects/markdown-static-site/skills/link-rot-detection/SKILL.md +103 -0
- package/examples/projects/markdown-static-site/skills/markdown-post-frontmatter-validation/SKILL.md +133 -0
- package/examples/projects/markdown-static-site/skills/migrate-posts-to-v2-frontmatter/SKILL.md +140 -0
- package/examples/projects/saas-stripe-postgres/README.md +208 -0
- package/examples/projects/saas-stripe-postgres/db/migrations/0004_canonicalize_orders.sql +37 -0
- package/examples/projects/saas-stripe-postgres/db/schema.sql +112 -0
- package/examples/projects/saas-stripe-postgres/skills/migrate-orders-to-canonical-schema/SKILL.md +149 -0
- package/examples/projects/saas-stripe-postgres/skills/nextjs-server-action-validation/SKILL.md +154 -0
- package/examples/projects/saas-stripe-postgres/skills/payment-provider-router/SKILL.md +153 -0
- package/examples/projects/saas-stripe-postgres/skills/postgres-rls-pattern/SKILL.md +163 -0
- package/examples/projects/saas-stripe-postgres/skills/stripe-webhook-signature-verification/SKILL.md +137 -0
- package/examples/protocol/skill-metadata-template.md +301 -0
- package/examples/protocol/skills.manifest.sample.json +13245 -0
- package/examples/skill-metadata-template.md +317 -0
- package/examples/skills.manifest.sample.json +13519 -0
- package/examples/tests/v3-1-skos-fixture/SKILL.md +93 -0
- package/marketplace/README.md +17 -0
- package/marketplace/skills/a11y/SKILL.md +66 -0
- package/marketplace/skills/acid-fundamentals/SKILL.md +106 -0
- package/marketplace/skills/agent-engineering/SKILL.md +386 -0
- package/marketplace/skills/agent-eval-design/SKILL.md +55 -0
- package/marketplace/skills/ai-native-development/SKILL.md +294 -0
- package/marketplace/skills/api-design/SKILL.md +60 -0
- package/marketplace/skills/architecture-decision-records/SKILL.md +55 -0
- package/marketplace/skills/background-jobs/SKILL.md +265 -0
- package/marketplace/skills/bounded-context-mapping/SKILL.md +55 -0
- package/marketplace/skills/cap-theorem-tradeoffs/SKILL.md +127 -0
- package/marketplace/skills/client-server-boundary/SKILL.md +187 -0
- package/marketplace/skills/code-review/SKILL.md +120 -0
- package/marketplace/skills/color-system-design/SKILL.md +43 -0
- package/marketplace/skills/component-architecture/SKILL.md +126 -0
- package/marketplace/skills/compression/SKILL.md +112 -0
- package/marketplace/skills/conceptual-modeling/SKILL.md +181 -0
- package/marketplace/skills/connection-pooling/SKILL.md +105 -0
- package/marketplace/skills/constraint-awareness/SKILL.md +287 -0
- package/marketplace/skills/content-monitor/SKILL.md +209 -0
- package/marketplace/skills/context-engineering/SKILL.md +320 -0
- package/marketplace/skills/context-graph/SKILL.md +174 -0
- package/marketplace/skills/context-management/SKILL.md +174 -0
- package/marketplace/skills/context-window/SKILL.md +239 -0
- package/marketplace/skills/contract-testing/SKILL.md +120 -0
- package/marketplace/skills/cron-scheduling/SKILL.md +223 -0
- package/marketplace/skills/dark-mode-implementation/SKILL.md +47 -0
- package/marketplace/skills/data-modeling/SKILL.md +59 -0
- package/marketplace/skills/data-modeling-fundamentals/SKILL.md +117 -0
- package/marketplace/skills/database-migration/SKILL.md +429 -0
- package/marketplace/skills/debugging/SKILL.md +67 -0
- package/marketplace/skills/dependency-architecture/SKILL.md +58 -0
- package/marketplace/skills/design-module-composition/SKILL.md +43 -0
- package/marketplace/skills/design-system-architecture/SKILL.md +61 -0
- package/marketplace/skills/design-thinking/SKILL.md +44 -0
- package/marketplace/skills/diagnosis/SKILL.md +296 -0
- package/marketplace/skills/diff-analysis/SKILL.md +188 -0
- package/marketplace/skills/e2e-test-design/SKILL.md +113 -0
- package/marketplace/skills/entity-relationship-modeling/SKILL.md +218 -0
- package/marketplace/skills/epistemic-grounding/SKILL.md +112 -0
- package/marketplace/skills/error-boundary/SKILL.md +235 -0
- package/marketplace/skills/error-tracking/SKILL.md +261 -0
- package/marketplace/skills/eval-driven-development/SKILL.md +147 -0
- package/marketplace/skills/evaluation/SKILL.md +113 -0
- package/marketplace/skills/event-contract-design/SKILL.md +60 -0
- package/marketplace/skills/event-storming/SKILL.md +56 -0
- package/marketplace/skills/form-ux-architecture/SKILL.md +60 -0
- package/marketplace/skills/framework-fit-analysis/SKILL.md +59 -0
- package/marketplace/skills/frontend-architecture/SKILL.md +43 -0
- package/marketplace/skills/generative-ui/SKILL.md +118 -0
- package/marketplace/skills/graph-audit/SKILL.md +81 -0
- package/marketplace/skills/guardrails/SKILL.md +118 -0
- package/marketplace/skills/hooks-patterns/SKILL.md +185 -0
- package/marketplace/skills/http-semantics/SKILL.md +136 -0
- package/marketplace/skills/ideation/SKILL.md +41 -0
- package/marketplace/skills/indexing-strategy/SKILL.md +108 -0
- package/marketplace/skills/information-architecture/SKILL.md +59 -0
- package/marketplace/skills/integration-test-design/SKILL.md +111 -0
- package/marketplace/skills/intent-recognition/SKILL.md +136 -0
- package/marketplace/skills/interaction-feedback/SKILL.md +59 -0
- package/marketplace/skills/interaction-patterns/SKILL.md +59 -0
- package/marketplace/skills/journey-mapping/SKILL.md +41 -0
- package/marketplace/skills/keywords/SKILL.md +213 -0
- package/marketplace/skills/knowledge-modeling/SKILL.md +232 -0
- package/marketplace/skills/layout-composition/SKILL.md +59 -0
- package/marketplace/skills/linguistics/SKILL.md +429 -0
- package/marketplace/skills/lint-overlay/SKILL.md +76 -0
- package/marketplace/skills/mental-models/SKILL.md +126 -0
- package/marketplace/skills/merge-queue/SKILL.md +94 -0
- package/marketplace/skills/methodology/SKILL.md +317 -0
- package/marketplace/skills/microcopy/SKILL.md +232 -0
- package/marketplace/skills/middleware-patterns/SKILL.md +363 -0
- package/marketplace/skills/mobile-responsive-ux/SKILL.md +287 -0
- package/marketplace/skills/mutation-testing/SKILL.md +112 -0
- package/marketplace/skills/naming-conventions/SKILL.md +112 -0
- package/marketplace/skills/observability-modeling/SKILL.md +59 -0
- package/marketplace/skills/ontology-modeling/SKILL.md +67 -0
- package/marketplace/skills/owasp-security/SKILL.md +153 -0
- package/marketplace/skills/pattern-recognition/SKILL.md +472 -0
- package/marketplace/skills/performance-budgets/SKILL.md +185 -0
- package/marketplace/skills/performance-engineering/SKILL.md +58 -0
- package/marketplace/skills/performance-testing/SKILL.md +125 -0
- package/marketplace/skills/printify/SKILL.md +42 -0
- package/marketplace/skills/prioritization/SKILL.md +118 -0
- package/marketplace/skills/problem-framing/SKILL.md +41 -0
- package/marketplace/skills/problem-locating-solving/SKILL.md +203 -0
- package/marketplace/skills/project-knowledge-extraction/SKILL.md +54 -0
- package/marketplace/skills/prompt-craft/SKILL.md +134 -0
- package/marketplace/skills/prompt-injection-defense/SKILL.md +132 -0
- package/marketplace/skills/property-based-testing/SKILL.md +100 -0
- package/marketplace/skills/prototyping/SKILL.md +43 -0
- package/marketplace/skills/query-optimization/SKILL.md +144 -0
- package/marketplace/skills/real-time-updates/SKILL.md +324 -0
- package/marketplace/skills/ref-patterns/SKILL.md +284 -0
- package/marketplace/skills/refactor/SKILL.md +65 -0
- package/marketplace/skills/rendering-models/SKILL.md +142 -0
- package/marketplace/skills/replication-patterns/SKILL.md +110 -0
- package/marketplace/skills/research-synthesis/SKILL.md +41 -0
- package/marketplace/skills/route-handler-design/SKILL.md +347 -0
- package/marketplace/skills/schema-evolution/SKILL.md +140 -0
- package/marketplace/skills/security-fundamentals/SKILL.md +139 -0
- package/marketplace/skills/semantic-center/SKILL.md +194 -0
- package/marketplace/skills/semantic-relations/SKILL.md +250 -0
- package/marketplace/skills/semantics/SKILL.md +366 -0
- package/marketplace/skills/semiotics/SKILL.md +230 -0
- package/marketplace/skills/seo-strategy/SKILL.md +260 -0
- package/marketplace/skills/server-actions-design/SKILL.md +243 -0
- package/marketplace/skills/server-components-design/SKILL.md +190 -0
- package/marketplace/skills/sharding-strategy/SKILL.md +123 -0
- package/marketplace/skills/shopify/SKILL.md +42 -0
- package/marketplace/skills/skill-infrastructure/SKILL.md +320 -0
- package/marketplace/skills/skill-router/SKILL.md +71 -0
- package/marketplace/skills/skill-scaffold/SKILL.md +105 -0
- package/marketplace/skills/snapshot-testing/SKILL.md +120 -0
- package/marketplace/skills/spec-driven-development/SKILL.md +148 -0
- package/marketplace/skills/state-machine-modeling/SKILL.md +56 -0
- package/marketplace/skills/state-management/SKILL.md +134 -0
- package/marketplace/skills/streaming-architecture/SKILL.md +194 -0
- package/marketplace/skills/summarization/SKILL.md +156 -0
- package/marketplace/skills/suspense-patterns/SKILL.md +265 -0
- package/marketplace/skills/system-interface-contracts/SKILL.md +59 -0
- package/marketplace/skills/task-analysis/SKILL.md +201 -0
- package/marketplace/skills/taxonomy-design/SKILL.md +66 -0
- package/marketplace/skills/test-coverage-strategy/SKILL.md +108 -0
- package/marketplace/skills/test-doubles-design/SKILL.md +98 -0
- package/marketplace/skills/test-driven-development/SKILL.md +96 -0
- package/marketplace/skills/testing-strategy/SKILL.md +67 -0
- package/marketplace/skills/theme-system-design/SKILL.md +43 -0
- package/marketplace/skills/tool-call-flow/SKILL.md +229 -0
- package/marketplace/skills/tool-call-strategy/SKILL.md +292 -0
- package/marketplace/skills/transaction-isolation/SKILL.md +98 -0
- package/marketplace/skills/type-safety/SKILL.md +177 -0
- package/marketplace/skills/typography-system/SKILL.md +43 -0
- package/marketplace/skills/usability-testing/SKILL.md +43 -0
- package/marketplace/skills/user-research/SKILL.md +43 -0
- package/marketplace/skills/vercel-composition-patterns/SKILL.md +157 -0
- package/marketplace/skills/version-control/SKILL.md +233 -0
- package/marketplace/skills/visual-design-foundations/SKILL.md +59 -0
- package/marketplace/skills/visual-hierarchy/SKILL.md +43 -0
- package/marketplace/skills/webhook-integration/SKILL.md +331 -0
- package/marketplace/skills/writing-humanizer/SKILL.md +380 -0
- package/package.json +67 -0
- package/schemas/manifest.schema.json +811 -0
- package/schemas/manifest.v2.schema.json +164 -0
- package/schemas/manifest.v3.schema.json +758 -0
- package/schemas/manifest.v4.schema.json +755 -0
- package/schemas/manifest.v5.schema.json +755 -0
- package/schemas/manifest.v6.schema.json +811 -0
- package/schemas/skill.context.jsonld +279 -0
- package/schemas/skill.schema.json +919 -0
- package/schemas/skill.v2.schema.json +201 -0
- package/schemas/skill.v3.schema.json +827 -0
- package/schemas/skill.v4.schema.json +822 -0
- package/schemas/skill.v5.schema.json +830 -0
- package/schemas/skill.v6.schema.json +946 -0
- package/schemas/vocabulary/keywords.json +180 -0
- package/schemas/vocabulary/workspace_tags.json +23 -0
- package/scripts/__tests__/migrate-skill-v2-to-v3.test.js +161 -0
- package/scripts/__tests__/migrate-skill-v3-to-v4.test.js +158 -0
- package/scripts/__tests__/test-export-parser-drift.js +149 -0
- package/scripts/__tests__/test-marketplace-export.js +114 -0
- package/scripts/__tests__/test-router-paths.js +82 -0
- package/scripts/__tests__/test-stability-promotion.js +244 -0
- package/scripts/__tests__/test-v3-1-alias-contract.js +109 -0
- package/scripts/__tests__/test-v3-1-skos-runtime.js +116 -0
- package/scripts/backfill-schema-version.js +198 -0
- package/scripts/build-field-reference.js +160 -0
- package/scripts/build-retrieval-baseline.js +511 -0
- package/scripts/check-markdown-links.js +211 -0
- package/scripts/check-protocol-consistency.js +979 -0
- package/scripts/export-marketplace-skills.js +610 -0
- package/scripts/export-skill.js +374 -0
- package/scripts/generate-manifest.js +787 -0
- package/scripts/lib/alias-contract.js +83 -0
- package/scripts/lib/audit-prompt-builder.js +771 -0
- package/scripts/lib/mock-grader.js +134 -0
- package/scripts/lib/parse-frontmatter.js +429 -0
- package/scripts/lib/roots.js +119 -0
- package/scripts/lint/check-archetype-sections.js +185 -0
- package/scripts/lint/check-category-enum.js +83 -0
- package/scripts/lint/check-routing-eval.js +146 -0
- package/scripts/lint/check-routing-quality.js +211 -0
- package/scripts/lint/check-stability-promotion.js +220 -0
- package/scripts/lint/format-code-frame.js +206 -0
- package/scripts/marketplace-install.js +125 -0
- package/scripts/migrate-category-to-enum.js +169 -0
- package/scripts/migrate-skill-v2-to-v3.js +424 -0
- package/scripts/migrate-skill-v3-to-v4.js +200 -0
- package/scripts/migrate-skill-v5-to-v6.js +304 -0
- package/scripts/restructure-by-category.js +85 -0
- package/scripts/seed-publication-classification.js +282 -0
- package/scripts/skill-audit.js +893 -0
- package/scripts/skill-graph-drift.js +483 -0
- package/scripts/skill-graph-route.js +766 -0
- package/scripts/skill-graph-routing-eval.js +393 -0
- package/scripts/skill-lint.js +1317 -0
- package/scripts/skill-overlap.js +213 -0
- package/scripts/verify-skill-md-export.js +201 -0
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: vercel-composition-patterns
|
|
3
|
+
description: "This skill provides React composition patterns that scale — compound components, render props, context providers, lifted state, and React 19 API changes. It applies when refactoring components with boolean prop proliferation, designing flexible component APIs, building reusable libraries, or reviewing component architecture — triggered by phrases like \\\\\\\"this component has too many props,\\\\\\\" \\\\\\\"design a compound component,\\\\\\\" \\\\\\\"make this more composable,\\\\\\\" \\\\\\\"refactor with render props,\\\\\\\" or \\\\\\\"component API design.\\\\\\\" Do NOT use for performance optimization — use react-best-practices instead."
|
|
4
|
+
license: MIT
|
|
5
|
+
compatibility: "Markdown, Git, agent-skill runtimes"
|
|
6
|
+
allowed-tools: Read Grep Bash
|
|
7
|
+
metadata:
|
|
8
|
+
metadata: "{\"schema_version\":6,\"version\":\"1.0.0\",\"type\":\"capability\",\"category\":\"engineering\",\"domain\":\"engineering/frontend\",\"scope\":\"portable\",\"owner\":\"skill-graph-maintainer\",\"freshness\":\"2026-03-28\",\"drift_check\":\"{\\\\\\\"last_verified\\\\\\\":\\\\\\\"2026-03-28\\\\\\\"}\",\"eval_artifacts\":\"planned\",\"eval_state\":\"unverified\",\"routing_eval\":\"absent\",\"stability\":\"experimental\",\"keywords\":\"[\\\\\\\"composition pattern\\\\\\\",\\\\\\\"compound component\\\\\\\",\\\\\\\"boolean prop\\\\\\\",\\\\\\\"render prop\\\\\\\",\\\\\\\"react composition\\\\\\\",\\\\\\\"context provider\\\\\\\",\\\\\\\"state explosion\\\\\\\",\\\\\\\"variant component\\\\\\\"]\",\"triggers\":\"[\\\\\\\"vercel-composition-patterns-skill\\\\\\\",\\\\\\\"react-composition-patterns-skill\\\\\\\"]\",\"relations\":\"{\\\\\\\"related\\\\\\\":[\\\\\\\"refactor\\\\\\\"],\\\\\\\"verify_with\\\\\\\":[\\\\\\\"code-review\\\\\\\"]}\",\"portability\":\"{\\\\\\\"readiness\\\\\\\":\\\\\\\"scripted\\\\\\\",\\\\\\\"targets\\\\\\\":[\\\\\\\"skill-md\\\\\\\"]}\",\"lifecycle\":\"{\\\\\\\"stale_after_days\\\\\\\":90,\\\\\\\"review_cadence\\\\\\\":\\\\\\\"quarterly\\\\\\\"}\",\"skill_graph_source_repo\":\"https://github.com/jacob-balslev/skill-graph\",\"skill_graph_protocol\":\"Skill Metadata Protocol v5\",\"skill_graph_project\":\"Skill Graph\",\"skill_graph_canonical_skill\":\"skills/vercel-composition-patterns/SKILL.md\"}"
|
|
9
|
+
skill_graph_source_repo: "https://github.com/jacob-balslev/skill-graph"
|
|
10
|
+
skill_graph_protocol: Skill Metadata Protocol v4
|
|
11
|
+
skill_graph_project: Skill Graph
|
|
12
|
+
skill_graph_canonical_skill: skills/vercel-composition-patterns/SKILL.md
|
|
13
|
+
---
|
|
14
|
+
# React Composition Patterns
|
|
15
|
+
|
|
16
|
+
## Domain Context
|
|
17
|
+
|
|
18
|
+
**What is this skill?** This skill provides React composition patterns that scale — compound components, render props, context providers, lifted state, and React 19 API changes. It applies when refactoring components with boolean prop proliferation, designing flexible component APIs, building reusable libraries, or reviewing component architecture — triggered by phrases like "this component has too many props," "design a compound component," "make this more composable," "refactor with render props," or "component API design." Do NOT use for performance optimization — use react-best-practices instead.
|
|
19
|
+
## Key Files
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
| File | Purpose |
|
|
24
|
+
|---|---|
|
|
25
|
+
| `skills/vercel-composition-patterns/PATTERNS.md` | Full composition guide with the canonical examples and decision rules this skill summarizes. |
|
|
26
|
+
| `skills/vercel-composition-patterns/AGENTS.md` | Repo-local entry guidance for when to use composition patterns and how to choose among them. |
|
|
27
|
+
| `skills/vercel-composition-patterns/rules/architecture-avoid-boolean-props.md` | Core rule for replacing boolean-prop APIs with composable structures. |
|
|
28
|
+
| `skills/vercel-composition-patterns/rules/architecture-compound-components.md` | Compound component pattern guidance for shared-context component families. |
|
|
29
|
+
| `skills/vercel-composition-patterns/rules/state-context-interface.md` | Provider contract pattern for exposing `state`, `actions`, and `meta`. |
|
|
30
|
+
| `skills/vercel-composition-patterns/rules/patterns-explicit-variants.md` | Explicit variant pattern for named component modes instead of flag combinations. |
|
|
31
|
+
|
|
32
|
+
## Coverage
|
|
33
|
+
|
|
34
|
+
React component composition patterns that prevent boolean prop proliferation: compound components (shared context children), explicit variant components, children-over-render-props, context provider state/actions/meta interface, boolean state explosion audit, and the React 19 API migration (no forwardRef, use() over useContext()). Covers the refactor playbook from flag inventory through variant extraction to provider-based composition.
|
|
35
|
+
|
|
36
|
+
## Philosophy
|
|
37
|
+
|
|
38
|
+
Boolean props are technical debt that compounds exponentially. Every boolean added to a component doubles the state space, and most of those combined states are impossible or unsupported. Agents default to adding "just one more boolean" because it is the fastest path -- this skill forces the discipline of auditing the state explosion first. Without it, agents regularly create components with 5+ booleans and fragile if/else rendering chains that break on edge-case combinations.
|
|
39
|
+
|
|
40
|
+
Composition patterns for building flexible, maintainable React components. Avoid
|
|
41
|
+
boolean prop proliferation by using compound components, lifting state, and
|
|
42
|
+
composing internals. These patterns make codebases easier for both humans and AI
|
|
43
|
+
agents to work with as they scale.
|
|
44
|
+
|
|
45
|
+
## Core Mandate
|
|
46
|
+
|
|
47
|
+
- Never add boolean props to customize behavior.
|
|
48
|
+
- If a component accumulates 3 or more booleans, treat the API as broken until proven otherwise.
|
|
49
|
+
- Provider boundaries matter more than visual nesting; the provider owns state, actions, and meta.
|
|
50
|
+
|
|
51
|
+
## When to Apply
|
|
52
|
+
|
|
53
|
+
Reference these guidelines when:
|
|
54
|
+
|
|
55
|
+
- Refactoring components with many boolean props
|
|
56
|
+
- Building reusable component libraries
|
|
57
|
+
- Designing flexible component APIs
|
|
58
|
+
- Reviewing component architecture
|
|
59
|
+
- Working with compound components or context providers
|
|
60
|
+
|
|
61
|
+
## Rule Categories by Priority
|
|
62
|
+
|
|
63
|
+
| Priority | Category | Impact | Prefix |
|
|
64
|
+
| -------- | ----------------------- | ------ | --------------- |
|
|
65
|
+
| 1 | Component Architecture | HIGH | `architecture-` |
|
|
66
|
+
| 2 | State Management | MEDIUM | `state-` |
|
|
67
|
+
| 3 | Implementation Patterns | MEDIUM | `patterns-` |
|
|
68
|
+
| 4 | React 19 APIs | MEDIUM | `react19-` |
|
|
69
|
+
|
|
70
|
+
## Quick Reference
|
|
71
|
+
|
|
72
|
+
### 1. Component Architecture (HIGH)
|
|
73
|
+
|
|
74
|
+
- `architecture-avoid-boolean-props` - Don't add boolean props to customize
|
|
75
|
+
behavior; use composition
|
|
76
|
+
- `architecture-compound-components` - Structure complex components with shared
|
|
77
|
+
context
|
|
78
|
+
- `architecture-boolean-state-audit` - Count reachable vs impossible states before adding props
|
|
79
|
+
|
|
80
|
+
### 2. State Management (MEDIUM)
|
|
81
|
+
|
|
82
|
+
- `state-decouple-implementation` - Provider is the only place that knows how
|
|
83
|
+
state is managed
|
|
84
|
+
- `state-context-interface` - Define generic interface with state, actions, meta
|
|
85
|
+
for dependency injection
|
|
86
|
+
- `state-lift-state` - Move state into provider components for sibling access
|
|
87
|
+
|
|
88
|
+
### 3. Implementation Patterns (MEDIUM)
|
|
89
|
+
|
|
90
|
+
- `patterns-explicit-variants` - Create explicit variant components instead of
|
|
91
|
+
boolean modes
|
|
92
|
+
- `patterns-children-over-render-props` - Use children for composition instead
|
|
93
|
+
of renderX props
|
|
94
|
+
|
|
95
|
+
### 4. React 19 APIs (MEDIUM)
|
|
96
|
+
|
|
97
|
+
> **⚠️ React 19+ only.** Skip this section if using React 18 or earlier.
|
|
98
|
+
|
|
99
|
+
- `react19-no-forwardref` - Don't use `forwardRef`; use `use()` instead of `useContext()`
|
|
100
|
+
|
|
101
|
+
## How to Use
|
|
102
|
+
|
|
103
|
+
### Boolean State Explosion Audit
|
|
104
|
+
|
|
105
|
+
Before adding a new prop or mode, answer:
|
|
106
|
+
|
|
107
|
+
1. How many booleans does this component already have?
|
|
108
|
+
2. How many combined states does that create?
|
|
109
|
+
3. Which of those states are impossible, unsupported, or nonsensical?
|
|
110
|
+
4. Can the valid states be named as explicit variants instead?
|
|
111
|
+
|
|
112
|
+
If a boolean produces impossible combinations, stop and refactor the API.
|
|
113
|
+
|
|
114
|
+
### Refactor Playbook
|
|
115
|
+
|
|
116
|
+
1. Inventory flags and modes.
|
|
117
|
+
2. Enumerate valid combinations.
|
|
118
|
+
3. Delete impossible states.
|
|
119
|
+
4. Name the remaining variants explicitly.
|
|
120
|
+
5. Extract a provider that owns `state`, `actions`, and `meta`.
|
|
121
|
+
6. Compose subcomponents around that contract.
|
|
122
|
+
7. Add one example or test per valid variant.
|
|
123
|
+
|
|
124
|
+
Read individual rule files for detailed explanations and code examples:
|
|
125
|
+
|
|
126
|
+
```
|
|
127
|
+
rules/architecture-avoid-boolean-props.md
|
|
128
|
+
rules/state-context-interface.md
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
Each rule file contains:
|
|
132
|
+
|
|
133
|
+
- Brief explanation of why it matters
|
|
134
|
+
- Incorrect code example with explanation
|
|
135
|
+
- Correct code example with explanation
|
|
136
|
+
- Additional context and references
|
|
137
|
+
|
|
138
|
+
## Verification
|
|
139
|
+
|
|
140
|
+
After applying this skill, verify:
|
|
141
|
+
- [ ] No component has 3+ boolean props without an explicit variant refactor
|
|
142
|
+
- [ ] State is lifted into a context provider, not drilled through props
|
|
143
|
+
- [ ] Compound components use children composition, not renderX props
|
|
144
|
+
- [ ] React 19 code uses ref as regular prop and use() instead of useContext()
|
|
145
|
+
- [ ] Impossible state combinations are documented and eliminated
|
|
146
|
+
|
|
147
|
+
## Do NOT Use When
|
|
148
|
+
|
|
149
|
+
| Instead of this skill | Use | Why |
|
|
150
|
+
|---|---|---|
|
|
151
|
+
| React performance optimization (memoization, suspense) | `react-best-practices` | Performance skill owns rendering optimization |
|
|
152
|
+
| Visual component design and styling | `visual-design` or `ux-ui-patterns` | This skill covers API shape, not visual appearance |
|
|
153
|
+
| Next.js routing and server components | `next-best-practices` | Next.js skill owns framework-level patterns |
|
|
154
|
+
|
|
155
|
+
## Full Compiled Document
|
|
156
|
+
|
|
157
|
+
For the complete guide with all rules expanded: `AGENTS.md`
|
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: version-control
|
|
3
|
+
description: "Use when designing or maintaining the shape of a repository's git history — choosing a branching model, deciding rebase vs merge, sizing commits, linking commits to tracker tickets, tagging releases, running parallel work across worktrees, and resolving the merge conflicts that arise from any of the above. Covers trunk-based development, short-lived feature branches, atomic commit discipline, linear-history conventions (rebase + squash), release tagging with annotated tags and SemVer, hotfix flows from tags, and worktree lifecycle for parallel agents or contributors. Do NOT use for the words inside the commit message (Conventional Commits format, identifier naming — use `naming-conventions`), for chasing a release-pipeline failure (use `debugging`), or for reviewing a PR's content (use `code-review`)."
|
|
4
|
+
license: MIT
|
|
5
|
+
compatibility: "Git-centric. Patterns translate to other DAG-based version-control systems (Mercurial, Jujutsu) with tool-specific syntax substitutions. Centralized systems (SVN, CVS) lack cheap branching and most of this skill's discipline does not apply."
|
|
6
|
+
allowed-tools: Read Grep Bash Edit
|
|
7
|
+
metadata:
|
|
8
|
+
metadata: "{\"schema_version\":6,\"version\":\"1.0.0\",\"type\":\"capability\",\"category\":\"engineering\",\"domain\":\"engineering/version-control\",\"scope\":\"portable\",\"owner\":\"skill-graph-maintainer\",\"freshness\":\"2026-05-06\",\"drift_check\":\"{\\\\\\\"last_verified\\\\\\\":\\\\\\\"2026-05-06\\\\\\\"}\",\"eval_artifacts\":\"planned\",\"eval_state\":\"unverified\",\"routing_eval\":\"absent\",\"stability\":\"experimental\",\"keywords\":\"[\\\\\\\"version control\\\\\\\",\\\\\\\"git workflow\\\\\\\",\\\\\\\"branching strategy\\\\\\\",\\\\\\\"trunk-based development\\\\\\\",\\\\\\\"git flow\\\\\\\",\\\\\\\"short-lived branch\\\\\\\",\\\\\\\"feature branch\\\\\\\",\\\\\\\"merge vs rebase\\\\\\\",\\\\\\\"linear history\\\\\\\",\\\\\\\"atomic commit\\\\\\\",\\\\\\\"squash commit\\\\\\\",\\\\\\\"cherry-pick\\\\\\\",\\\\\\\"release tag\\\\\\\",\\\\\\\"annotated tag\\\\\\\",\\\\\\\"SemVer release\\\\\\\",\\\\\\\"hotfix branch\\\\\\\",\\\\\\\"git worktree\\\\\\\",\\\\\\\"parallel branch development\\\\\\\",\\\\\\\"commit provenance\\\\\\\",\\\\\\\"merge conflict resolution\\\\\\\",\\\\\\\"protected branch\\\\\\\"]\",\"examples\":\"[\\\\\\\"set up trunk-based development for a four-person team\\\\\\\",\\\\\\\"the main branch has 50 merge commits before release — clean up the history\\\\\\\",\\\\\\\"two agents are working in the same repo and clobbering each other's uncommitted changes — set up worktrees\\\\\\\",\\\\\\\"tag the v1.2.0 release with provenance back to the closing tracker milestone\\\\\\\",\\\\\\\"the feature branch is two weeks old and three weeks behind main — rebase or recreate?\\\\\\\",\\\\\\\"design the hotfix workflow for an urgent production patch off a release tag\\\\\\\",\\\\\\\"every commit must link back to a tracker ticket — what's the right enforcement layer?\\\\\\\",\\\\\\\"should we squash, rebase, or merge when integrating a feature branch?\\\\\\\"]\",\"anti_examples\":\"[\\\\\\\"draft a Conventional Commits message for this change\\\\\\\",\\\\\\\"the release pipeline failed at the tag-creation step — find out why\\\\\\\",\\\\\\\"review this PR before we merge it\\\\\\\",\\\\\\\"explain our git policy to new contributors in the docs\\\\\\\",\\\\\\\"decide if this branching-rule change needs a regression test\\\\\\\",\\\\\\\"refactor the git helper scripts in our tooling repo\\\\\\\"]\",\"relations\":\"{\\\\\\\"boundary\\\\\\\":[{\\\\\\\"skill\\\\\\\":\\\\\\\"code-review\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"code-review evaluates the *content* of a change before merge; version-control owns the *shape* of history that change leaves behind\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"refactor\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"refactor reorganizes code without changing external behavior; version-control reorganizes history without changing the code's content (rebase, squash, cherry-pick)\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"naming-conventions\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"naming-conventions owns commit-message wording (Conventional Commits prefix, scope, subject); version-control owns commit *boundaries* (what counts as one commit) and history *shape*\\\\\\\"}],\\\\\\\"related\\\\\\\":[\\\\\\\"code-review\\\\\\\",\\\\\\\"refactor\\\\\\\",\\\\\\\"naming-conventions\\\\\\\",\\\\\\\"debugging\\\\\\\"],\\\\\\\"verify_with\\\\\\\":[\\\\\\\"code-review\\\\\\\"]}\",\"portability\":\"{\\\\\\\"readiness\\\\\\\":\\\\\\\"scripted\\\\\\\",\\\\\\\"targets\\\\\\\":[\\\\\\\"skill-md\\\\\\\"]}\",\"lifecycle\":\"{\\\\\\\"stale_after_days\\\\\\\":90,\\\\\\\"review_cadence\\\\\\\":\\\\\\\"quarterly\\\\\\\"}\",\"skill_graph_source_repo\":\"https://github.com/jacob-balslev/skill-graph\",\"skill_graph_protocol\":\"Skill Metadata Protocol v5\",\"skill_graph_project\":\"Skill Graph\",\"skill_graph_canonical_skill\":\"skills/version-control/SKILL.md\"}"
|
|
9
|
+
skill_graph_source_repo: "https://github.com/jacob-balslev/skill-graph"
|
|
10
|
+
skill_graph_protocol: Skill Metadata Protocol v4
|
|
11
|
+
skill_graph_project: Skill Graph
|
|
12
|
+
skill_graph_canonical_skill: skills/version-control/SKILL.md
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# Version Control
|
|
16
|
+
|
|
17
|
+
## Coverage
|
|
18
|
+
|
|
19
|
+
- Branching strategy selection: trunk-based development (default for product teams), Git Flow (only for shipped libraries with multiple supported versions), and the warning signs that a chosen model is failing
|
|
20
|
+
- Atomic commit discipline: one logical change per commit, the test that distinguishes "atomic" from "small," and how to split a commit that snuck two changes together
|
|
21
|
+
- History shape: rebase over merge for feature integration, squash on merge for keeping main linear, when to allow merge commits (rare — release branches with parallel hotfix history)
|
|
22
|
+
- Provenance: the convention that every commit references its originating tracker ticket, and the enforcement options (commit-message hook, CI check, social convention)
|
|
23
|
+
- Release tagging: annotated tags with provenance, SemVer 2.0.0 mapping, hotfix flow from a tag without polluting main
|
|
24
|
+
- Worktree lifecycle: when to use worktrees, how to keep them clean, and the multi-agent failure mode worktrees prevent (parallel-session index contamination)
|
|
25
|
+
- Path-limited commits: the `git commit --only -- <paths>` discipline that prevents a parallel session from injecting unrelated staged files into your commit
|
|
26
|
+
- Conflict resolution: structural conflicts (one side renamed, one side edited) versus content conflicts; when to abandon a rebase and recreate the branch
|
|
27
|
+
|
|
28
|
+
## Philosophy
|
|
29
|
+
|
|
30
|
+
A repository's history is a *decision log*. When the log is noisy — merge commits where rebases would have been cleaner, multi-purpose commits that mix a fix with a feature, missing tracker IDs, branches that lived for a month — the team loses the ability to answer two questions that matter under pressure: *"why did this change?"* and *"can I revert just this without taking everything else with it?"* Both questions become archaeology rather than lookup.
|
|
31
|
+
|
|
32
|
+
The correct mental model is: every commit is a transaction the future will need to read, often in a hurry, often by someone who was not in the meeting. The discipline is to keep transactions small, attributed, and reversible. A commit that combines a refactor with a bug fix cannot be reverted cleanly when the fix turns out to be wrong; a commit without a tracker ID forces the next reader into git-blame archaeology to reconstruct intent.
|
|
33
|
+
|
|
34
|
+
The second principle is *cost asymmetry*. Cleaning up history *before* merge is cheap — squash, rebase, edit messages, split commits, all local operations on a feature branch. Cleaning up history *after* merge is expensive — it requires force-pushes, coordinated rewrites, and risks losing other people's work. Push the cleanup left to the moment the cost is lowest.
|
|
35
|
+
|
|
36
|
+
The third principle, specific to multi-agent and multi-session work: the git index is a *process-shared mutex*. Two agents in the same repo share `.git/index`, which means a `git add` in one session lands in the other session's `git diff --cached`. The standard `git commit` command picks up everything currently staged. The defence is path-limited commits (`git commit --only -- <paths>`) that build a temporary index from explicitly-named paths only, ignoring whatever else a parallel session has staged. Without this discipline, multi-agent work produces commits with surprise files.
|
|
37
|
+
|
|
38
|
+
## Branching Strategy: Trunk-Based by Default
|
|
39
|
+
|
|
40
|
+
Trunk-based development is the right default for almost every product codebase: a single long-lived branch (`main`), short-lived feature branches that integrate frequently (every 1-2 days), and incomplete features merged behind feature flags rather than parked on long-running branches.
|
|
41
|
+
|
|
42
|
+
| Rule | Why |
|
|
43
|
+
|---|---|
|
|
44
|
+
| Branches live < 48 hours | Forces small PRs, prevents drift from main, keeps merge cost low |
|
|
45
|
+
| PRs target < 400 changed lines | Larger PRs review poorly; reviewer attention drops sharply past 400 lines |
|
|
46
|
+
| Incomplete features ship behind flags | Lets you merge often without exposing half-built work to users |
|
|
47
|
+
| `main` is always shippable | CI is the gate; nobody pushes broken code to main |
|
|
48
|
+
|
|
49
|
+
The anti-pattern is a long-lived `develop` branch (Git Flow) used as if it were trunk: drift accumulates, integration becomes its own project, and "merging develop to main" becomes a quarterly event with thousands of changed files. Git Flow exists for a different problem — shipping libraries with multiple supported major versions, where you genuinely need parallel release branches. If you are not maintaining `v1.x` and `v2.x` simultaneously, you do not need Git Flow.
|
|
50
|
+
|
|
51
|
+
## Commit Authoring: One Change, One Commit
|
|
52
|
+
|
|
53
|
+
A commit is "atomic" when reverting it produces no broken intermediate state, no accidentally-reverted unrelated work, and no half-finished features. The test:
|
|
54
|
+
|
|
55
|
+
> *If a senior reviewer asks "why does this commit exist?" and the answer requires the word "and," split the commit.*
|
|
56
|
+
|
|
57
|
+
A commit titled "fix order rounding bug AND clean up the order utils file" is two commits. Run `git rebase -i HEAD~1` and split before merging.
|
|
58
|
+
|
|
59
|
+
The commit-message wording (verb tense, prefix conventions, character limits) is *naming* — see `naming-conventions` for that. Version-control owns the commit *boundaries*: what counts as one commit, where one ends and the next begins, and whether the commit can stand alone if every later commit is reverted.
|
|
60
|
+
|
|
61
|
+
### Provenance: Linking Commits to Tracker Tickets
|
|
62
|
+
|
|
63
|
+
Every commit on a feature branch should link to the tracker ticket that produced it. The format is convention-driven; common forms:
|
|
64
|
+
|
|
65
|
+
```
|
|
66
|
+
feat(orders): add CSV export button (PROJ-1234)
|
|
67
|
+
|
|
68
|
+
Implements the export button on the order list. Output mirrors the
|
|
69
|
+
table columns; encoding is UTF-8 with BOM for spreadsheet compatibility.
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
The tracker ID may live in the subject (visible in `git log --oneline`) or in a structured trailer (`Refs: PROJ-1234`, machine-parseable for automated cross-linking). Pick one and apply it consistently — mixing both fragments the searchable history.
|
|
73
|
+
|
|
74
|
+
If the change implements an architecture decision, reference the decision document in the commit body so future readers can find the why:
|
|
75
|
+
|
|
76
|
+
```
|
|
77
|
+
refactor(persistence): replace ad-hoc SQL with repository pattern (PROJ-1290)
|
|
78
|
+
|
|
79
|
+
Implements the data-access pattern decided in docs/decisions/0017-repository-pattern.md.
|
|
80
|
+
The change is mechanical; behavior is preserved by the existing integration tests.
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## History Shape: Rebase, Squash, Linear
|
|
84
|
+
|
|
85
|
+
For feature-branch integration into main, prefer this order:
|
|
86
|
+
|
|
87
|
+
1. **Rebase the feature branch onto main** before merging. This re-applies your commits on top of the latest main, replacing "merge main into feature" noise with a clean linear history.
|
|
88
|
+
2. **Squash on merge** if the feature branch has multiple commits that only make sense together. The PR becomes one commit on main; the feature-branch detail lives in the PR description and the squashed commit body.
|
|
89
|
+
3. **Allow real merge commits** only when both branches have valuable independent history (rare — usually a release branch and a hotfix branch).
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
# Local workflow, on a feature branch
|
|
93
|
+
git fetch origin
|
|
94
|
+
git rebase origin/main # replay your commits on top of latest main
|
|
95
|
+
# resolve any conflicts, run tests, push
|
|
96
|
+
git push --force-with-lease # safe force: rejects if remote moved since your last fetch
|
|
97
|
+
|
|
98
|
+
# Merging the PR into main (in your forge UI or CLI)
|
|
99
|
+
# Pick "Squash and merge" if the branch has noisy WIP commits
|
|
100
|
+
# Pick "Rebase and merge" if every commit is publishable on its own
|
|
101
|
+
# Avoid "Create a merge commit" by default
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
`--force-with-lease` is the safe variant of `--force`: it pushes only if the remote branch is at the SHA you last fetched, refusing if a collaborator pushed in between. Plain `--force` overwrites whatever is there, which destroys other people's work.
|
|
105
|
+
|
|
106
|
+
## Release Tagging
|
|
107
|
+
|
|
108
|
+
Releases are *annotated* tags (`git tag -a`), not lightweight tags. Annotated tags carry a tagger identity, a date, and a message — they are first-class objects in the git store and survive history rewrites that would orphan a lightweight tag.
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
git tag -a v1.2.0 -m "Release v1.2.0 — closes Milestone 4 (PROJ-MS-4)"
|
|
112
|
+
git push origin v1.2.0
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Tag names follow SemVer 2.0.0 (`MAJOR.MINOR.PATCH`, optional pre-release suffix `-rc.1` or `-beta.2`). Patch tags are cheap; cut one per shipped fix.
|
|
116
|
+
|
|
117
|
+
### Hotfix Flow
|
|
118
|
+
|
|
119
|
+
When production has a bug that cannot wait for the next scheduled release:
|
|
120
|
+
|
|
121
|
+
```bash
|
|
122
|
+
# 1. Branch from the latest release tag, not from main
|
|
123
|
+
git checkout -b hotfix/v1.2.1 v1.2.0
|
|
124
|
+
|
|
125
|
+
# 2. Apply the minimal fix; test; commit
|
|
126
|
+
git commit -m "fix(orders): rounding error in tax calculation (PROJ-1305)"
|
|
127
|
+
|
|
128
|
+
# 3. Tag the patch
|
|
129
|
+
git tag -a v1.2.1 -m "Hotfix v1.2.1 — tax rounding (PROJ-1305)"
|
|
130
|
+
git push origin v1.2.1
|
|
131
|
+
|
|
132
|
+
# 4. Cherry-pick the fix back to main so the bug doesn't return next release
|
|
133
|
+
git checkout main
|
|
134
|
+
git cherry-pick <hotfix-commit-sha>
|
|
135
|
+
git push origin main
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
The hotfix branch can be deleted after the cherry-pick. The discipline is to keep `main`'s history linear *and* keep the hotfix tag pointing at the minimal fix, not at a snapshot of main.
|
|
139
|
+
|
|
140
|
+
## Worktrees: Parallel Work Without Contamination
|
|
141
|
+
|
|
142
|
+
Worktrees let multiple checkouts of the same repository coexist on different branches in different filesystem directories — without the cost of a full clone and without the conflict of a single working tree being on multiple branches.
|
|
143
|
+
|
|
144
|
+
```bash
|
|
145
|
+
# Create a worktree for a parallel feature
|
|
146
|
+
git worktree add ../my-repo-feature-A feature/A
|
|
147
|
+
|
|
148
|
+
# List current worktrees
|
|
149
|
+
git worktree list
|
|
150
|
+
|
|
151
|
+
# Remove a worktree after the work is merged
|
|
152
|
+
git worktree remove ../my-repo-feature-A
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
Worktrees are essential when:
|
|
156
|
+
|
|
157
|
+
- Multiple agents or contributors are working in the same repo simultaneously and would otherwise overwrite each other's uncommitted changes
|
|
158
|
+
- You want to run a long task (test suite, build) on one branch while editing on another
|
|
159
|
+
- You need to inspect a release tag's tree without disrupting your in-progress work
|
|
160
|
+
|
|
161
|
+
The cleanup discipline matters: an abandoned worktree directory does not free its branch lock; `git worktree list --porcelain` and `git worktree prune` are the cleanup tools.
|
|
162
|
+
|
|
163
|
+
## Path-Limited Commits
|
|
164
|
+
|
|
165
|
+
In any repository where multiple processes or sessions share the working tree, the standard `git commit` is unsafe. The git index is a process-shared mutex; another session's `git add` lands in your `git diff --cached`, and a later `git commit` picks it up.
|
|
166
|
+
|
|
167
|
+
The defence:
|
|
168
|
+
|
|
169
|
+
```bash
|
|
170
|
+
# Right — for tracked files: build a temporary index from these paths only
|
|
171
|
+
git commit --only -- path/one path/two -m "..."
|
|
172
|
+
|
|
173
|
+
# Right — for new files: add first, then commit with --only
|
|
174
|
+
git add path/one path/two
|
|
175
|
+
git commit --only -- path/one path/two -m "..."
|
|
176
|
+
|
|
177
|
+
# Wrong — picks up whatever a parallel session has staged
|
|
178
|
+
git add path/one
|
|
179
|
+
git commit -m "..."
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
`--only` builds a transient index containing only the listed paths and commits from that. Whatever a parallel session has in the real index is left untouched for that session to commit. The safety window closes at the `git commit --only` call, not at the `git add`.
|
|
183
|
+
|
|
184
|
+
After every commit, verify the file list:
|
|
185
|
+
|
|
186
|
+
```bash
|
|
187
|
+
git show --stat HEAD
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
If files you did not intend to commit appeared, a parallel session staged them between your `git add` and your `git commit`. The recovery is `git reset --soft HEAD^` and a retry with `--only`.
|
|
191
|
+
|
|
192
|
+
## Merge Conflict Resolution
|
|
193
|
+
|
|
194
|
+
Conflicts come in two shapes:
|
|
195
|
+
|
|
196
|
+
**Content conflicts** — both sides edited the same lines. Resolution is line-by-line judgment, often informed by reading the surrounding context to understand what each side was trying to achieve.
|
|
197
|
+
|
|
198
|
+
**Structural conflicts** — one side renamed a file, moved a function, or changed a dependency boundary while the other side edited the old shape. Git frequently reports these as "added by us / deleted by them" or "modified by both" with surprising contents. The resolution is rarely a textual merge; it is a re-application of the smaller change against the new shape.
|
|
199
|
+
|
|
200
|
+
When a rebase produces conflicts on every replayed commit (a sign the branch and main have diverged structurally), the right move is often to abandon the rebase, recreate the branch from current main, and cherry-pick or re-author the changes:
|
|
201
|
+
|
|
202
|
+
```bash
|
|
203
|
+
git rebase --abort
|
|
204
|
+
git checkout main && git pull
|
|
205
|
+
git checkout -b feature/x-redo
|
|
206
|
+
# re-author the changes against the current main shape
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
A rebase that requires resolving the same conflict in five replayed commits is a signal — the branch is too old and the cleanup cost has crossed the recreate threshold.
|
|
210
|
+
|
|
211
|
+
## Verification
|
|
212
|
+
|
|
213
|
+
- [ ] Branching model is named explicitly (trunk-based or Git Flow), and the team's actual behavior matches the named model
|
|
214
|
+
- [ ] Feature branches stay short-lived (under 48 hours typical, under one week absolute)
|
|
215
|
+
- [ ] Every commit on a feature branch is atomic — reverts cleanly without taking unrelated work
|
|
216
|
+
- [ ] Every commit links to a tracker ticket via convention (subject suffix or `Refs:` trailer), enforced by hook or CI when feasible
|
|
217
|
+
- [ ] PRs are integrated via rebase-and-merge or squash-and-merge by default; explicit merge commits only for cross-branch releases
|
|
218
|
+
- [ ] Releases are annotated tags following SemVer 2.0.0
|
|
219
|
+
- [ ] Hotfixes branch from the relevant release tag, are tagged with a patch increment, and are cherry-picked back to main
|
|
220
|
+
- [ ] Worktrees are used for any work that runs alongside other in-progress work in the same repo
|
|
221
|
+
- [ ] Commits in multi-session repos use `git commit --only -- <paths>` to prevent parallel-session index contamination
|
|
222
|
+
- [ ] `git push --force-with-lease` is the only force-push form ever used; plain `--force` is treated as a destructive operation
|
|
223
|
+
|
|
224
|
+
## Do NOT Use When
|
|
225
|
+
|
|
226
|
+
| Use instead | When |
|
|
227
|
+
|---|---|
|
|
228
|
+
| `naming-conventions` | Writing the commit message itself (Conventional Commits prefix, scope, subject wording, identifier names) |
|
|
229
|
+
| `documentation` | Drafting the contributor-docs page that explains your version-control policy |
|
|
230
|
+
| `code-review` | Reviewing a PR's content for correctness, style, or design |
|
|
231
|
+
| `refactor` | Reorganizing the code that the commits touch — version-control reorganizes the *commits*, refactor reorganizes the *code* |
|
|
232
|
+
| `debugging` | Chasing a release-pipeline failure or a broken hotfix tag |
|
|
233
|
+
| `testing-strategy` | Deciding whether a change to the branching policy itself needs a regression test |
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: visual-design-foundations
|
|
3
|
+
description: "Use when designing or auditing visual craft: color palette, typography, spacing, elevation, rhythm, density, visual hierarchy, brand fit, contrast intent, and motion feel. Do NOT use for sign-system meaning (use `semiotics`), token/component architecture (use `design-system-architecture`), responsive structure (use `layout-composition`), or accessibility compliance (use `a11y`)."
|
|
4
|
+
license: MIT
|
|
5
|
+
compatibility: "Portable visual-design guidance for product UI, dashboards, docs, marketing-adjacent product surfaces, and design-system consumers. Does not replace brand-specific guidelines."
|
|
6
|
+
allowed-tools: Read Grep
|
|
7
|
+
metadata:
|
|
8
|
+
metadata: "{\"schema_version\":6,\"version\":\"1.0.0\",\"type\":\"capability\",\"category\":\"design\",\"domain\":\"design/visual\",\"scope\":\"portable\",\"owner\":\"skill-graph-maintainer\",\"freshness\":\"2026-05-11\",\"drift_check\":\"{\\\\\\\"last_verified\\\\\\\":\\\\\\\"2026-05-11\\\\\\\"}\",\"eval_artifacts\":\"present\",\"eval_state\":\"unverified\",\"routing_eval\":\"absent\",\"stability\":\"experimental\",\"keywords\":\"[\\\\\\\"visual-design\\\\\\\",\\\\\\\"visual craft\\\\\\\",\\\\\\\"palette direction\\\\\\\",\\\\\\\"typography direction\\\\\\\",\\\\\\\"spatial rhythm\\\\\\\",\\\\\\\"density rules\\\\\\\",\\\\\\\"elevation treatment\\\\\\\",\\\\\\\"motion feel\\\\\\\",\\\\\\\"brand fit\\\\\\\"]\",\"examples\":\"[\\\\\\\"pick a visual direction for this dashboard without changing the task structure\\\\\\\",\\\\\\\"audit color, typography, spacing, and hierarchy for this product page\\\\\\\",\\\\\\\"this UI feels flat and hard to scan - improve the visual hierarchy\\\\\\\",\\\\\\\"choose a restrained palette and type scale for an internal admin tool\\\\\\\"]\",\"anti_examples\":\"[\\\\\\\"what does this icon or badge color communicate to users?\\\\\\\",\\\\\\\"define semantic tokens and component variants\\\\\\\",\\\\\\\"decide the responsive section order and breakpoint behavior\\\\\\\",\\\\\\\"verify WCAG contrast, focus order, and screen-reader behavior\\\\\\\"]\",\"relations\":\"{\\\\\\\"boundary\\\\\\\":[{\\\\\\\"skill\\\\\\\":\\\\\\\"semiotics\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"semiotics owns what visual signs mean; visual-design-foundations owns the craft choices that shape the surface\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"design-system-architecture\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"design-system-architecture owns reusable tokens and components; visual-design-foundations owns visual direction and craft on a surface\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"layout-composition\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"layout-composition owns responsive structure; visual-design-foundations owns palette, typography, rhythm, density, and polish\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"a11y\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"a11y owns accessibility compliance; visual-design-foundations can propose visual choices that a11y later verifies\\\\\\\"}],\\\\\\\"related\\\\\\\":[\\\\\\\"semiotics\\\\\\\",\\\\\\\"design-system-architecture\\\\\\\",\\\\\\\"layout-composition\\\\\\\",\\\\\\\"microcopy\\\\\\\",\\\\\\\"a11y\\\\\\\"],\\\\\\\"verify_with\\\\\\\":[\\\\\\\"a11y\\\\\\\",\\\\\\\"semiotics\\\\\\\"]}\",\"portability\":\"{\\\\\\\"readiness\\\\\\\":\\\\\\\"scripted\\\\\\\",\\\\\\\"targets\\\\\\\":[\\\\\\\"skill-md\\\\\\\"]}\",\"lifecycle\":\"{\\\\\\\"stale_after_days\\\\\\\":365,\\\\\\\"review_cadence\\\\\\\":\\\\\\\"quarterly\\\\\\\"}\",\"skill_graph_source_repo\":\"https://github.com/jacob-balslev/skill-graph\",\"skill_graph_protocol\":\"Skill Metadata Protocol v5\",\"skill_graph_project\":\"Skill Graph\",\"skill_graph_canonical_skill\":\"skills/visual-design-foundations/SKILL.md\"}"
|
|
9
|
+
skill_graph_source_repo: "https://github.com/jacob-balslev/skill-graph"
|
|
10
|
+
skill_graph_protocol: Skill Metadata Protocol v4
|
|
11
|
+
skill_graph_project: Skill Graph
|
|
12
|
+
skill_graph_canonical_skill: skills/visual-design-foundations/SKILL.md
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# Visual Design Foundations
|
|
16
|
+
|
|
17
|
+
## Coverage
|
|
18
|
+
|
|
19
|
+
Design and audit visual craft for interface surfaces. Covers palette direction, type scale, spacing rhythm, hierarchy, density, elevation, borders, contrast intent, visual weight, motion feel, brand fit, and when a visual system should be split into deeper color, typography, or motion skills.
|
|
20
|
+
|
|
21
|
+
## Philosophy
|
|
22
|
+
|
|
23
|
+
Visual design is not decoration after structure; it is how the structure becomes legible. Good visual craft makes priority, grouping, affordance, and tone visible without asking the user to parse every label.
|
|
24
|
+
|
|
25
|
+
Keep this skill at foundation level. If the task needs formal color math, font-loading engineering, or token governance, hand off to the skill that owns that contract.
|
|
26
|
+
|
|
27
|
+
## Method
|
|
28
|
+
|
|
29
|
+
1. Name the surface type: operational tool, docs, dashboard, editorial page, marketplace, or brand page.
|
|
30
|
+
2. State the intended tone and scanning demand.
|
|
31
|
+
3. Choose palette roles before picking raw colors: surface, text, accent, success, warning, danger, info, disabled.
|
|
32
|
+
4. Define type roles: page title, section heading, control label, body, metadata, numeric emphasis.
|
|
33
|
+
5. Set spacing and density rules that match repeated use, not one screenshot.
|
|
34
|
+
6. Use elevation, border, and background only to clarify grouping or affordance.
|
|
35
|
+
7. Check visual decisions against `semiotics` and `a11y` before treating them as done.
|
|
36
|
+
|
|
37
|
+
## Evals
|
|
38
|
+
|
|
39
|
+
This skill ships a comprehension-eval artifact at [`examples/evals/visual-design-foundations.json`](https://github.com/jacob-balslev/skill-graph/blob/main/examples/evals/visual-design-foundations.json). The checklist below is the authoring gate for visual-design decisions; the eval file is the grader surface.
|
|
40
|
+
|
|
41
|
+
## Verification
|
|
42
|
+
|
|
43
|
+
- [ ] Visual hierarchy makes primary content faster to find
|
|
44
|
+
- [ ] Palette roles are named by purpose rather than raw color
|
|
45
|
+
- [ ] Type roles are consistent and not oversized inside compact UI
|
|
46
|
+
- [ ] Spacing and density fit the surface's repeated-use context
|
|
47
|
+
- [ ] Elevation and borders clarify grouping instead of adding noise
|
|
48
|
+
- [ ] Motion, if used, clarifies state or continuity and can be reduced
|
|
49
|
+
- [ ] A11y contrast and non-color-only checks are deferred to `a11y`
|
|
50
|
+
|
|
51
|
+
## Do NOT Use When
|
|
52
|
+
|
|
53
|
+
| Use instead | When |
|
|
54
|
+
|---|---|
|
|
55
|
+
| `semiotics` | The question is what a color, icon, badge, shape, or visual metaphor means. |
|
|
56
|
+
| `design-system-architecture` | The task is semantic tokens, component APIs, theming contracts, or governance. |
|
|
57
|
+
| `layout-composition` | The task is responsive structure, grid tracks, breakpoints, or section order. |
|
|
58
|
+
| `a11y` | The task is WCAG contrast, focus, labels, keyboard access, or assistive technology. |
|
|
59
|
+
| `microcopy` | The task is the wording inside buttons, dialogs, empty states, errors, or tooltips. |
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: visual-hierarchy
|
|
3
|
+
description: "Use when establishing visual hierarchy — type scale ratios, spacing rhythm, contrast as ordering signal, weight and size as importance, and the layered relationship between primary, secondary, and tertiary information. Do NOT use for content writing, information architecture, or specific color palette construction."
|
|
4
|
+
license: CC-BY-4.0
|
|
5
|
+
metadata:
|
|
6
|
+
metadata: "{\"schema_version\":6,\"version\":\"1.0.0\",\"type\":\"capability\",\"category\":\"design\",\"scope\":\"portable\",\"owner\":\"skill-graph-maintainer\",\"freshness\":\"2026-05-12\",\"drift_check\":\"{\\\\\\\"last_verified\\\\\\\":\\\\\\\"2026-05-12\\\\\\\"}\",\"eval_artifacts\":\"planned\",\"eval_state\":\"unverified\",\"routing_eval\":\"absent\",\"stability\":\"experimental\",\"keywords\":\"[\\\\\\\"visual hierarchy\\\\\\\",\\\\\\\"hierarchical type sizing\\\\\\\",\\\\\\\"proximity hierarchy\\\\\\\",\\\\\\\"contrast hierarchy\\\\\\\",\\\\\\\"importance ordering\\\\\\\",\\\\\\\"reading order\\\\\\\",\\\\\\\"focal point\\\\\\\",\\\\\\\"figure ground\\\\\\\",\\\\\\\"gestalt principles\\\\\\\",\\\\\\\"hierarchy through weight\\\\\\\",\\\\\\\"hierarchy through size\\\\\\\",\\\\\\\"button hierarchy\\\\\\\",\\\\\\\"primary secondary tertiary actions\\\\\\\"]\",\"triggers\":\"[\\\\\\\"visual hierarchy\\\\\\\",\\\\\\\"type as hierarchy\\\\\\\",\\\\\\\"what should the eye go to first\\\\\\\",\\\\\\\"establishing focus\\\\\\\",\\\\\\\"page hierarchy\\\\\\\"]\",\"examples\":\"[\\\\\\\"Decide the H1/H2/H3 size ratios and weight contrast for a long-form article layout\\\\\\\",\\\\\\\"Reduce visual noise on a dashboard where every element competes for attention\\\\\\\",\\\\\\\"Establish a clear primary call-to-action on a page with multiple secondary actions\\\\\\\"]\",\"anti_examples\":\"[\\\\\\\"Write the H1 copy that should appear at the top of the landing page\\\\\\\",\\\\\\\"Choose between sans-serif and serif typefaces for the brand\\\\\\\",\\\\\\\"Pick the brand's primary color\\\\\\\"]\",\"relations\":\"{\\\\\\\"related\\\\\\\":[\\\\\\\"typography-system\\\\\\\",\\\\\\\"color-system-design\\\\\\\",\\\\\\\"layout-composition\\\\\\\",\\\\\\\"visual-design-foundations\\\\\\\"],\\\\\\\"boundary\\\\\\\":[{\\\\\\\"skill\\\\\\\":\\\\\\\"typography-system\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"typography-system defines the scale and the typefaces; this skill decides how to deploy them as hierarchy signals on a given surface.\\\\\\\"},{\\\\\\\"skill\\\\\\\":\\\\\\\"layout-composition\\\\\\\",\\\\\\\"reason\\\\\\\":\\\\\\\"layout-composition handles grid, alignment, and spatial structure; this skill handles the prioritization within a layout.\\\\\\\"}]}\",\"skill_graph_source_repo\":\"https://github.com/jacob-balslev/skill-graph\",\"skill_graph_protocol\":\"Skill Metadata Protocol v5\",\"skill_graph_project\":\"Skill Graph\",\"skill_graph_canonical_skill\":\"skills/visual-hierarchy/SKILL.md\"}"
|
|
7
|
+
skill_graph_source_repo: "https://github.com/jacob-balslev/skill-graph"
|
|
8
|
+
skill_graph_protocol: Skill Metadata Protocol v4
|
|
9
|
+
skill_graph_project: Skill Graph
|
|
10
|
+
skill_graph_canonical_skill: skills/visual-hierarchy/SKILL.md
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# Visual Hierarchy
|
|
14
|
+
|
|
15
|
+
## Coverage
|
|
16
|
+
Visual hierarchy is the ordering of perceptual prominence that tells a reader what to look at first, second, and third. The available signals are scale (larger draws attention before smaller), weight (heavier strokes draw attention before lighter), contrast (higher contrast against the background reads before lower), color (saturated and warm colors read before desaturated and cool), position (top-left in left-to-right reading cultures reads first; centered isolated elements break flow and draw focus), and isolation (whitespace around an element increases its prominence regardless of its intrinsic properties).
|
|
17
|
+
|
|
18
|
+
Type scale operationalizes scale as hierarchy. Modular scales — pairs of values related by a ratio (1.125 major second, 1.2 minor third, 1.25 major third, 1.333 perfect fourth, 1.414 augmented fourth, 1.5 perfect fifth, 1.618 golden ratio) — produce step sizes that feel intentional. The ratio chosen determines the perceptual distance between levels: a 1.125 ratio gives subtle hierarchy useful for content-dense interfaces; a 1.5 ratio gives loud hierarchy useful for marketing surfaces. Most production systems use 5–7 type sizes; more sizes dilute hierarchy by giving the reader too many similar steps.
|
|
19
|
+
|
|
20
|
+
Spacing creates hierarchy through proximity (Gestalt's law of proximity — items closer together read as grouped, items further apart read as separate) and through breathing room (an element with more whitespace around it reads as more important). Vertical rhythm — a consistent baseline grid that spacing values snap to — reinforces grouping without explicit dividers and makes the page feel calmer because the eye finds predictable resting points.
|
|
21
|
+
|
|
22
|
+
Contrast as ordering is more general than color contrast. Two equal-sized headlines can be ordered by weight (bold reads before regular), by color (filled black reads before mid-gray), or by treatment (underlined or boxed reads before plain). The principle: when two elements compete for attention, increase the difference along one dimension rather than incrementing many dimensions slightly. Loud-loud combinations exhaust the reader; one loud against many quiet directs them.
|
|
23
|
+
|
|
24
|
+
## Philosophy
|
|
25
|
+
Hierarchy is what you suppress, not what you amplify. Making one thing important by making everything else louder produces a flat, noisy surface where nothing is important. The discipline is restraint: most elements should be quiet so the few that need to be loud can be heard.
|
|
26
|
+
|
|
27
|
+
Reading order is a property of the page, not just the markup. CSS source order, visual size, color contrast, and position all participate. When they disagree — a giant pull quote in the middle of an article, an overlay button that contrasts more than the page title — the reader's eye follows the visual cues regardless of the writer's intent. Verify hierarchy by asking what someone notices first, second, and third without reading.
|
|
28
|
+
|
|
29
|
+
## Verification
|
|
30
|
+
- Squinting at the surface (or rendering it at low resolution) reveals an unambiguous order of attention; the intended first element is the first noticed.
|
|
31
|
+
- Type scale uses at most 7 sizes; each level differs from its neighbor enough to register as different at a glance.
|
|
32
|
+
- Whitespace around a primary element is larger than whitespace around its neighbors, not equal to them.
|
|
33
|
+
- A grayscale screenshot retains the intended hierarchy; if hierarchy collapses without color, the design is over-reliant on hue.
|
|
34
|
+
- Primary calls to action appear at most once per view; if two CTAs are present, one is visibly secondary in weight or fill.
|
|
35
|
+
- Adjacent elements at the same hierarchy level share scale, weight, and color treatment; deviations are deliberate and signal a meaningful difference.
|
|
36
|
+
- Reading the page aloud in the order the eye lands on elements matches the order intended by the content.
|
|
37
|
+
|
|
38
|
+
## Do NOT Use When
|
|
39
|
+
- The task is writing the copy itself rather than ordering it visually. Hierarchy without good copy emphasizes the wrong things.
|
|
40
|
+
- You are deciding how to structure a site's navigation or content taxonomy. That is information architecture, not visual hierarchy.
|
|
41
|
+
- The decision is which typeface to use or which color the brand should adopt. Use typography-system or color-system-design.
|
|
42
|
+
- The concern is grid structure, alignment, or column composition. Use layout-composition.
|
|
43
|
+
- The accessibility question is contrast ratios for WCAG compliance. Use a11y for the threshold; this skill for the design intent.
|