ai-playbook 1.0.0
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/README.md +146 -0
- package/agents/README.md +168 -0
- package/agents/SKILL.md +633 -0
- package/agents/architect/AGENT.md +44 -0
- package/agents/architect/README.md +5 -0
- package/agents/coder/AGENT.md +43 -0
- package/agents/coder/README.md +5 -0
- package/agents/debugger/AGENT.md +42 -0
- package/agents/debugger/README.md +6 -0
- package/agents/devops/AGENT.md +43 -0
- package/agents/devops/README.md +5 -0
- package/agents/documentation/AGENT.md +45 -0
- package/agents/documentation/README.md +5 -0
- package/agents/examples.md +550 -0
- package/agents/performance/AGENT.md +45 -0
- package/agents/performance/README.md +6 -0
- package/agents/planner/AGENT.md +44 -0
- package/agents/planner/README.md +6 -0
- package/agents/product-owner/AGENT.md +46 -0
- package/agents/product-owner/README.md +6 -0
- package/agents/refactorer/AGENT.md +44 -0
- package/agents/refactorer/README.md +6 -0
- package/agents/release-manager/AGENT.md +45 -0
- package/agents/release-manager/README.md +6 -0
- package/agents/researcher/AGENT.md +44 -0
- package/agents/researcher/README.md +6 -0
- package/agents/reviewer/AGENT.md +43 -0
- package/agents/reviewer/README.md +6 -0
- package/agents/security/AGENT.md +46 -0
- package/agents/security/README.md +6 -0
- package/agents/support/AGENT.md +45 -0
- package/agents/support/README.md +6 -0
- package/agents/tester/AGENT.md +46 -0
- package/agents/tester/README.md +5 -0
- package/bin/cli.js +186 -0
- package/commands/README.md +266 -0
- package/commands/build.md +135 -0
- package/commands/clean.md +126 -0
- package/commands/deploy-prod.md +171 -0
- package/commands/deploy-staging.md +147 -0
- package/commands/deps.md +169 -0
- package/commands/dev.md +132 -0
- package/commands/format.md +142 -0
- package/commands/lint.md +125 -0
- package/commands/migrate.md +159 -0
- package/commands/release.md +183 -0
- package/commands/rollback.md +152 -0
- package/commands/seed.md +178 -0
- package/commands/setup.md +109 -0
- package/commands/test.md +134 -0
- package/commands/validate.md +147 -0
- package/context/README.md +7 -0
- package/context/aem.md +47 -0
- package/context/architecture.md +51 -0
- package/context/bullminder.md +57 -0
- package/context/coding-style.md +42 -0
- package/context/communication.md +53 -0
- package/context/company.md +46 -0
- package/context/engineering.md +63 -0
- package/context/project-template.md +71 -0
- package/context/trading.md +52 -0
- package/hooks/README.md +326 -0
- package/hooks/code-review/README.md +6 -0
- package/hooks/code-review/check-coverage.md +101 -0
- package/hooks/custom/README.md +6 -0
- package/hooks/custom/project-specific-hooks.md +273 -0
- package/hooks/deployment/README.md +6 -0
- package/hooks/deployment/health-check.md +102 -0
- package/hooks/deployment/pre-deploy-check.md +84 -0
- package/hooks/documentation/README.md +6 -0
- package/hooks/documentation/update-changelog.md +146 -0
- package/hooks/post-task/README.md +5 -0
- package/hooks/post-task/run-tests.md +61 -0
- package/hooks/pre-commit/README.md +6 -0
- package/hooks/pre-commit/format.md +63 -0
- package/hooks/pre-commit/lint.md +62 -0
- package/hooks/pre-commit/type-check.md +78 -0
- package/hooks/pre-task/README.md +6 -0
- package/hooks/pre-task/check-branch.md +48 -0
- package/hooks/pre-task/validate-environment.md +48 -0
- package/hooks/security-check/README.md +6 -0
- package/hooks/security-check/dependency-audit.md +85 -0
- package/hooks/security-check/secrets-scan.md +77 -0
- package/hooks/test-before-finish/README.md +6 -0
- package/hooks/test-before-finish/run-all-tests.md +128 -0
- package/index.js +69 -0
- package/knowledge/README.md +33 -0
- package/knowledge/ai-agents.md +74 -0
- package/knowledge/decision-making.md +73 -0
- package/knowledge/documentation.md +67 -0
- package/knowledge/engineering-principles.md +65 -0
- package/knowledge/product-discovery.md +68 -0
- package/knowledge/security-privacy.md +54 -0
- package/knowledge/testing-quality.md +63 -0
- package/package.json +63 -0
- package/patterns/README.md +7 -0
- package/prompts/README.md +208 -0
- package/prompts/architect/README.md +96 -0
- package/prompts/architect/design-system.md +140 -0
- package/prompts/debugger/README.md +96 -0
- package/prompts/debugger/diagnose-issue.md +141 -0
- package/prompts/developer/README.md +129 -0
- package/prompts/developer/fix-bug.md +136 -0
- package/prompts/developer/implement-feature.md +133 -0
- package/prompts/product-owner/README.md +116 -0
- package/prompts/product-owner/define-feature.md +145 -0
- package/prompts/reviewer/README.md +91 -0
- package/prompts/reviewer/code-review.md +129 -0
- package/prompts/support/README.md +154 -0
- package/prompts/support/resolve-issue.md +124 -0
- package/roles/README.md +6 -0
- package/roles/design-architect/README.md +98 -0
- package/roles/design-architect/accessibility/README.md +33 -0
- package/roles/design-architect/accessibility/checklists.md +29 -0
- package/roles/design-architect/accessibility/examples.md +35 -0
- package/roles/design-architect/checklists.md +76 -0
- package/roles/design-architect/component-library/README.md +35 -0
- package/roles/design-architect/component-library/checklists.md +29 -0
- package/roles/design-architect/component-library/examples.md +35 -0
- package/roles/design-architect/design-system/README.md +35 -0
- package/roles/design-architect/design-system/checklists.md +27 -0
- package/roles/design-architect/design-system/examples.md +41 -0
- package/roles/design-architect/examples/README.md +31 -0
- package/roles/design-architect/examples/checklists.md +26 -0
- package/roles/design-architect/examples/examples.md +46 -0
- package/roles/design-architect/examples.md +90 -0
- package/roles/design-architect/figma/README.md +33 -0
- package/roles/design-architect/figma/checklists.md +27 -0
- package/roles/design-architect/figma/examples.md +38 -0
- package/roles/design-architect/responsibilities.md +73 -0
- package/roles/design-architect/responsive/README.md +34 -0
- package/roles/design-architect/responsive/checklists.md +26 -0
- package/roles/design-architect/responsive/examples.md +39 -0
- package/roles/design-architect/role.md +129 -0
- package/roles/design-architect/skill-map.md +42 -0
- package/roles/design-architect/triggers.md +110 -0
- package/roles/design-architect/ui/README.md +36 -0
- package/roles/design-architect/ui/checklists.md +29 -0
- package/roles/design-architect/ui/examples.md +28 -0
- package/roles/design-architect/usability/README.md +34 -0
- package/roles/design-architect/usability/checklists.md +28 -0
- package/roles/design-architect/usability/examples.md +31 -0
- package/roles/design-architect/ux/README.md +36 -0
- package/roles/design-architect/ux/checklists.md +28 -0
- package/roles/design-architect/ux/examples.md +37 -0
- package/roles/design-architect/wireframes/README.md +34 -0
- package/roles/design-architect/wireframes/checklists.md +25 -0
- package/roles/design-architect/wireframes/examples.md +32 -0
- package/roles/design-architect/workflow.md +80 -0
- package/roles/devops/README.md +101 -0
- package/roles/devops/ansible/README.md +6 -0
- package/roles/devops/checklists.md +413 -0
- package/roles/devops/ci-cd/README.md +169 -0
- package/roles/devops/ci-cd/checklists.md +289 -0
- package/roles/devops/ci-cd/examples.md +429 -0
- package/roles/devops/cloud-platforms/README.md +109 -0
- package/roles/devops/cost-optimization/README.md +131 -0
- package/roles/devops/disaster-recovery/README.md +118 -0
- package/roles/devops/docker/README.md +6 -0
- package/roles/devops/examples/README.md +6 -0
- package/roles/devops/examples.md +775 -0
- package/roles/devops/github-actions/README.md +6 -0
- package/roles/devops/helm/README.md +6 -0
- package/roles/devops/infrastructure-as-code/README.md +160 -0
- package/roles/devops/infrastructure-as-code/checklists.md +124 -0
- package/roles/devops/jenkins/README.md +6 -0
- package/roles/devops/kubernetes/README.md +150 -0
- package/roles/devops/kubernetes/checklists.md +192 -0
- package/roles/devops/kubernetes/examples.md +189 -0
- package/roles/devops/monitoring/README.md +93 -0
- package/roles/devops/networking/README.md +83 -0
- package/roles/devops/performance/README.md +104 -0
- package/roles/devops/responsibilities.md +95 -0
- package/roles/devops/role.md +130 -0
- package/roles/devops/security/README.md +126 -0
- package/roles/devops/skill-map.md +162 -0
- package/roles/devops/terraform/README.md +6 -0
- package/roles/devops/triggers.md +241 -0
- package/roles/devops/workflow.md +197 -0
- package/roles/qa/README.md +16 -0
- package/roles/qa/api-testing/README.md +6 -0
- package/roles/qa/automation/README.md +6 -0
- package/roles/qa/checklists.md +24 -0
- package/roles/qa/examples/README.md +6 -0
- package/roles/qa/examples.md +27 -0
- package/roles/qa/performance/README.md +6 -0
- package/roles/qa/playwright/README.md +6 -0
- package/roles/qa/responsibilities.md +16 -0
- package/roles/qa/role.md +47 -0
- package/roles/qa/selenium/README.md +6 -0
- package/roles/qa/skill-map.md +14 -0
- package/roles/qa/triggers.md +10 -0
- package/roles/qa/workflow.md +9 -0
- package/roles/software-architect/README.md +16 -0
- package/roles/software-architect/agents/README.md +6 -0
- package/roles/software-architect/ai-architecture/README.md +6 -0
- package/roles/software-architect/aws/README.md +6 -0
- package/roles/software-architect/azure/README.md +6 -0
- package/roles/software-architect/caching/README.md +6 -0
- package/roles/software-architect/checklists.md +25 -0
- package/roles/software-architect/cloud/README.md +6 -0
- package/roles/software-architect/database-design/README.md +6 -0
- package/roles/software-architect/diagrams/README.md +6 -0
- package/roles/software-architect/distributed-systems/README.md +7 -0
- package/roles/software-architect/docker/README.md +6 -0
- package/roles/software-architect/event-driven/README.md +7 -0
- package/roles/software-architect/examples/README.md +6 -0
- package/roles/software-architect/examples.md +22 -0
- package/roles/software-architect/gcp/README.md +6 -0
- package/roles/software-architect/kubernetes/README.md +6 -0
- package/roles/software-architect/messaging/README.md +6 -0
- package/roles/software-architect/rag/README.md +7 -0
- package/roles/software-architect/responsibilities.md +17 -0
- package/roles/software-architect/role.md +46 -0
- package/roles/software-architect/scalability/README.md +6 -0
- package/roles/software-architect/security/README.md +6 -0
- package/roles/software-architect/skill-map.md +15 -0
- package/roles/software-architect/system-design/README.md +6 -0
- package/roles/software-architect/triggers.md +10 -0
- package/roles/software-architect/vector-db/README.md +6 -0
- package/roles/software-architect/workflow.md +9 -0
- package/roles/software-developer/README.md +116 -0
- package/roles/software-developer/api/README.md +365 -0
- package/roles/software-developer/api/checklist.md +131 -0
- package/roles/software-developer/api/examples.md +459 -0
- package/roles/software-developer/authentication/README.md +26 -0
- package/roles/software-developer/authentication/checklists.md +22 -0
- package/roles/software-developer/authentication/examples.md +32 -0
- package/roles/software-developer/authorization/README.md +26 -0
- package/roles/software-developer/authorization/checklists.md +21 -0
- package/roles/software-developer/authorization/examples.md +27 -0
- package/roles/software-developer/backend/README.md +26 -0
- package/roles/software-developer/backend/checklists.md +21 -0
- package/roles/software-developer/backend/examples.md +21 -0
- package/roles/software-developer/cache/README.md +25 -0
- package/roles/software-developer/cache/checklists.md +21 -0
- package/roles/software-developer/cache/examples.md +22 -0
- package/roles/software-developer/checklists.md +122 -0
- package/roles/software-developer/code-review/README.md +23 -0
- package/roles/software-developer/code-review/checklists.md +22 -0
- package/roles/software-developer/code-review/examples.md +20 -0
- package/roles/software-developer/database/README.md +27 -0
- package/roles/software-developer/database/checklists.md +21 -0
- package/roles/software-developer/database/examples.md +27 -0
- package/roles/software-developer/debugging/README.md +24 -0
- package/roles/software-developer/debugging/checklists.md +20 -0
- package/roles/software-developer/debugging/examples.md +28 -0
- package/roles/software-developer/examples/README.md +22 -0
- package/roles/software-developer/examples/checklists.md +8 -0
- package/roles/software-developer/examples/examples.md +25 -0
- package/roles/software-developer/examples.md +378 -0
- package/roles/software-developer/frontend/README.md +76 -0
- package/roles/software-developer/frontend/accessibility/README.md +136 -0
- package/roles/software-developer/frontend/accessibility/best-practices.md +368 -0
- package/roles/software-developer/frontend/code-quality/README.md +136 -0
- package/roles/software-developer/frontend/code-quality/best-practices.md +309 -0
- package/roles/software-developer/frontend/components/README.md +65 -0
- package/roles/software-developer/frontend/components/best-practices.md +273 -0
- package/roles/software-developer/frontend/debugging/README.md +149 -0
- package/roles/software-developer/frontend/debugging/best-practices.md +329 -0
- package/roles/software-developer/frontend/examples/README.md +19 -0
- package/roles/software-developer/frontend/examples/checklists.md +8 -0
- package/roles/software-developer/frontend/examples/examples.md +17 -0
- package/roles/software-developer/frontend/logging-observability/README.md +196 -0
- package/roles/software-developer/frontend/logging-observability/best-practices.md +430 -0
- package/roles/software-developer/frontend/performance/README.md +99 -0
- package/roles/software-developer/frontend/performance/best-practices.md +350 -0
- package/roles/software-developer/frontend/state-management/README.md +85 -0
- package/roles/software-developer/frontend/state-management/best-practices.md +344 -0
- package/roles/software-developer/frontend/testing/README.md +114 -0
- package/roles/software-developer/frontend/testing/best-practices.md +272 -0
- package/roles/software-developer/fullstack/README.md +25 -0
- package/roles/software-developer/fullstack/checklists.md +19 -0
- package/roles/software-developer/fullstack/examples.md +14 -0
- package/roles/software-developer/graphql/README.md +24 -0
- package/roles/software-developer/graphql/checklists.md +20 -0
- package/roles/software-developer/graphql/examples.md +24 -0
- package/roles/software-developer/integration-tests/README.md +25 -0
- package/roles/software-developer/integration-tests/checklists.md +20 -0
- package/roles/software-developer/integration-tests/examples.md +18 -0
- package/roles/software-developer/java/README.md +24 -0
- package/roles/software-developer/java/checklists.md +16 -0
- package/roles/software-developer/java/examples.md +22 -0
- package/roles/software-developer/javascript/README.md +24 -0
- package/roles/software-developer/javascript/checklists.md +15 -0
- package/roles/software-developer/javascript/examples.md +18 -0
- package/roles/software-developer/logging/README.md +105 -0
- package/roles/software-developer/logging/checklists.md +48 -0
- package/roles/software-developer/logging/examples.md +135 -0
- package/roles/software-developer/messaging/README.md +24 -0
- package/roles/software-developer/messaging/checklists.md +21 -0
- package/roles/software-developer/messaging/examples.md +26 -0
- package/roles/software-developer/microservices/README.md +25 -0
- package/roles/software-developer/microservices/checklists.md +21 -0
- package/roles/software-developer/microservices/examples.md +21 -0
- package/roles/software-developer/node/README.md +25 -0
- package/roles/software-developer/node/checklists.md +15 -0
- package/roles/software-developer/node/examples.md +15 -0
- package/roles/software-developer/nosql/README.md +24 -0
- package/roles/software-developer/nosql/checklists.md +21 -0
- package/roles/software-developer/nosql/examples.md +20 -0
- package/roles/software-developer/observability/README.md +25 -0
- package/roles/software-developer/observability/checklists.md +21 -0
- package/roles/software-developer/observability/examples.md +22 -0
- package/roles/software-developer/performance/README.md +26 -0
- package/roles/software-developer/performance/checklists.md +20 -0
- package/roles/software-developer/performance/examples.md +20 -0
- package/roles/software-developer/python/README.md +25 -0
- package/roles/software-developer/python/checklists.md +15 -0
- package/roles/software-developer/python/examples.md +17 -0
- package/roles/software-developer/react/README.md +24 -0
- package/roles/software-developer/react/checklists.md +15 -0
- package/roles/software-developer/react/examples.md +22 -0
- package/roles/software-developer/refactoring/README.md +23 -0
- package/roles/software-developer/refactoring/checklists.md +21 -0
- package/roles/software-developer/refactoring/examples.md +11 -0
- package/roles/software-developer/responsibilities.md +58 -0
- package/roles/software-developer/role.md +127 -0
- package/roles/software-developer/skill-map.md +88 -0
- package/roles/software-developer/springboot/README.md +25 -0
- package/roles/software-developer/springboot/checklists.md +15 -0
- package/roles/software-developer/springboot/examples.md +21 -0
- package/roles/software-developer/sql/README.md +24 -0
- package/roles/software-developer/sql/checklists.md +22 -0
- package/roles/software-developer/sql/examples.md +20 -0
- package/roles/software-developer/testing/README.md +25 -0
- package/roles/software-developer/testing/checklists.md +21 -0
- package/roles/software-developer/testing/examples.md +19 -0
- package/roles/software-developer/triggers.md +550 -0
- package/roles/software-developer/typescript/README.md +25 -0
- package/roles/software-developer/typescript/checklists.md +15 -0
- package/roles/software-developer/typescript/examples.md +18 -0
- package/roles/software-developer/unit-tests/README.md +24 -0
- package/roles/software-developer/unit-tests/checklists.md +19 -0
- package/roles/software-developer/unit-tests/examples.md +22 -0
- package/roles/software-developer/workflow.md +196 -0
- package/roles/sre/README.md +16 -0
- package/roles/sre/alerts/README.md +6 -0
- package/roles/sre/availability/README.md +6 -0
- package/roles/sre/chaos/README.md +6 -0
- package/roles/sre/checklists.md +24 -0
- package/roles/sre/examples/README.md +6 -0
- package/roles/sre/examples.md +19 -0
- package/roles/sre/observability/README.md +6 -0
- package/roles/sre/reliability/README.md +6 -0
- package/roles/sre/responsibilities.md +16 -0
- package/roles/sre/role.md +46 -0
- package/roles/sre/skill-map.md +14 -0
- package/roles/sre/slos/README.md +6 -0
- package/roles/sre/triggers.md +10 -0
- package/roles/sre/workflow.md +9 -0
- package/roles/support-engineer/README.md +16 -0
- package/roles/support-engineer/checklists.md +24 -0
- package/roles/support-engineer/datadog/README.md +6 -0
- package/roles/support-engineer/examples/README.md +6 -0
- package/roles/support-engineer/examples.md +17 -0
- package/roles/support-engineer/incident-response/README.md +6 -0
- package/roles/support-engineer/kubernetes/README.md +6 -0
- package/roles/support-engineer/linux/README.md +6 -0
- package/roles/support-engineer/logs/README.md +6 -0
- package/roles/support-engineer/monitoring/README.md +6 -0
- package/roles/support-engineer/networking/README.md +6 -0
- package/roles/support-engineer/newrelic/README.md +6 -0
- package/roles/support-engineer/postmortem/README.md +6 -0
- package/roles/support-engineer/production/README.md +6 -0
- package/roles/support-engineer/responsibilities.md +16 -0
- package/roles/support-engineer/role.md +47 -0
- package/roles/support-engineer/root-cause-analysis/README.md +6 -0
- package/roles/support-engineer/runbooks/README.md +6 -0
- package/roles/support-engineer/skill-map.md +14 -0
- package/roles/support-engineer/splunk/README.md +6 -0
- package/roles/support-engineer/triggers.md +10 -0
- package/roles/support-engineer/troubleshooting/README.md +6 -0
- package/roles/support-engineer/workflow.md +9 -0
- package/setup.sh +204 -0
- package/skills/.claude/README.md +7 -0
- package/skills/README.md +21 -0
- package/skills/ai-agents/README.md +207 -0
- package/skills/ai-agents/examples.md +335 -0
- package/skills/ai-agents/skill.md +392 -0
- package/skills/architecture/README.md +198 -0
- package/skills/architecture/examples.md +316 -0
- package/skills/architecture/skill.md +189 -0
- package/skills/design-architecture/README.md +107 -0
- package/skills/design-architecture/examples.md +84 -0
- package/skills/design-architecture/skill.md +192 -0
- package/skills/devops/README.md +177 -0
- package/skills/devops/examples.md +376 -0
- package/skills/devops/skill.md +210 -0
- package/skills/documentation/README.md +182 -0
- package/skills/documentation/examples.md +364 -0
- package/skills/documentation/skill.md +200 -0
- package/skills/performance/README.md +177 -0
- package/skills/performance/examples.md +376 -0
- package/skills/performance/skill.md +199 -0
- package/skills/qa/README.md +106 -0
- package/skills/qa/examples.md +84 -0
- package/skills/qa/skill.md +384 -0
- package/skills/security/README.md +108 -0
- package/skills/security/examples.md +85 -0
- package/skills/security/skill.md +223 -0
- package/skills/software-development/README.md +239 -0
- package/skills/software-development/assessment.md +0 -0
- package/skills/software-development/checklists.md +0 -0
- package/skills/software-development/examples.md +375 -0
- package/skills/software-development/prompts.md +0 -0
- package/skills/software-development/skill.md +390 -0
- package/skills/software-development/templates/README.md +7 -0
- package/skills/software-development/templates/api-development.md +0 -0
- package/skills/software-development/templates/bug-fix.md +0 -0
- package/skills/software-development/templates/code-review.md +0 -0
- package/skills/software-development/templates/feature-implementation.md +0 -0
- package/skills/software-development/templates/llm-integration.md +0 -0
- package/skills/software-development/templates/performance-review.md +0 -0
- package/skills/software-development/templates/security-review.md +0 -0
- package/skills/software-development/templates/test-generation.md +0 -0
- package/skills/software-development/tools.md +0 -0
- package/skills/software-development/workflows.md +0 -0
- package/skills/sre/README.md +107 -0
- package/skills/sre/examples.md +379 -0
- package/skills/sre/skill.md +256 -0
- package/skills/support-engineering/README.md +107 -0
- package/skills/support-engineering/examples.md +85 -0
- package/skills/support-engineering/skill.md +103 -0
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
# Architecture Skill
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
|
|
5
|
+
The Architecture skill enables software engineers to design, analyze, and evolve complex systems with clear separation of concerns, scalability, and maintainability. This skill focuses on system-level design patterns, component relationships, data flows, integration strategies, and architectural decision-making that balance technical requirements with business constraints.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Table of Contents
|
|
10
|
+
|
|
11
|
+
1. [Core Competencies](#core-competencies)
|
|
12
|
+
2. [Specific Domains & Tools](#specific-domains--tools)
|
|
13
|
+
3. [Best Practices](#best-practices)
|
|
14
|
+
4. [Deliverables](#deliverables)
|
|
15
|
+
5. [Success Criteria](#success-criteria)
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Core Competencies
|
|
20
|
+
|
|
21
|
+
### 1. **System Decomposition**
|
|
22
|
+
Break monolithic problems into discrete, independently manageable components. Identify component boundaries, define interfaces, and minimize coupling. Apply domain-driven design principles to structure components around business capabilities. Document component responsibilities and interaction patterns.
|
|
23
|
+
|
|
24
|
+
**Application**: Transforming large systems into microservices, redesigning legacy monoliths, planning multi-team development, establishing service boundaries.
|
|
25
|
+
|
|
26
|
+
### 2. **Layered Architecture Design**
|
|
27
|
+
Design horizontal layers (presentation, business logic, data access, infrastructure) with clear contracts between layers. Separate concerns by function and ensure each layer has a specific responsibility. Establish patterns for inter-layer communication and data transformation.
|
|
28
|
+
|
|
29
|
+
**Application**: Creating n-tier applications, designing web frameworks, establishing API boundaries, separating concerns in monolithic applications.
|
|
30
|
+
|
|
31
|
+
### 3. **Scalability Architecture**
|
|
32
|
+
Design systems that handle growing load horizontally and vertically. Plan for database scaling (replication, sharding, partitioning), caching strategies, load balancing, and asynchronous processing. Identify bottlenecks early and design for elasticity.
|
|
33
|
+
|
|
34
|
+
**Application**: Planning infrastructure growth, designing distributed databases, implementing caching layers, queue-based architecture for async workloads.
|
|
35
|
+
|
|
36
|
+
### 4. **Data Architecture & Modeling**
|
|
37
|
+
Design data structures, schemas, and storage strategies aligned with business requirements. Choose appropriate data models (relational, document, graph, key-value). Plan for data consistency, replication, backup strategies, and migration paths.
|
|
38
|
+
|
|
39
|
+
**Application**: Database schema design, polyglot persistence strategies, data warehouse architecture, event sourcing design.
|
|
40
|
+
|
|
41
|
+
### 5. **Integration Architecture**
|
|
42
|
+
Design how independent systems communicate and exchange data. Select appropriate integration patterns (APIs, message queues, webhooks, event streams, batch processes). Manage data consistency across system boundaries.
|
|
43
|
+
|
|
44
|
+
**Application**: Designing service meshes, implementing API gateways, building event-driven systems, orchestrating cross-system workflows.
|
|
45
|
+
|
|
46
|
+
### 6. **API Design & Contract Management**
|
|
47
|
+
Design APIs with clear contracts that enable loose coupling and independent evolution. Apply versioning strategies, establish governance models, manage API lifecycle. Design for extensibility and backward compatibility.
|
|
48
|
+
|
|
49
|
+
**Application**: RESTful API design, GraphQL schema design, SDK design, managing API evolution and deprecation.
|
|
50
|
+
|
|
51
|
+
### 7. **Asynchronous Architecture**
|
|
52
|
+
Design systems using async patterns for improved resilience and scalability. Implement message brokers, event buses, job queues, and eventual consistency models. Handle retries, dead lettering, and ordering guarantees.
|
|
53
|
+
|
|
54
|
+
**Application**: Building event-driven systems, implementing saga patterns, designing queue-based workflows, handling background jobs.
|
|
55
|
+
|
|
56
|
+
### 8. **Caching Strategy**
|
|
57
|
+
Design caching layers to reduce latency and database load. Select cache granularity, eviction policies, invalidation strategies, and consistency models. Balance between freshness and performance.
|
|
58
|
+
|
|
59
|
+
**Application**: Multi-level caching (L1, L2, distributed), cache-aside pattern, write-through/write-behind strategies, distributed cache management.
|
|
60
|
+
|
|
61
|
+
### 9. **Security Architecture**
|
|
62
|
+
Design systems with security as a first-class concern. Plan authentication, authorization, encryption, secrets management, rate limiting, and threat modeling. Establish security boundaries and access control.
|
|
63
|
+
|
|
64
|
+
**Application**: Zero-trust architecture, API security design, encryption strategy, secrets rotation, network segmentation.
|
|
65
|
+
|
|
66
|
+
### 10. **Resilience & Fault Tolerance**
|
|
67
|
+
Design systems that gracefully handle failures. Implement circuit breakers, bulkheads, retries, timeouts, and fallback mechanisms. Plan for partial degradation and graceful degradation.
|
|
68
|
+
|
|
69
|
+
**Application**: Building fault-tolerant systems, designing for cascading failure prevention, implementing health checks, planning disaster recovery.
|
|
70
|
+
|
|
71
|
+
### 11. **Event-Driven Architecture**
|
|
72
|
+
Design systems where components communicate through events. Define event schemas, establish event sourcing patterns, implement event replay capabilities. Manage ordering and exactly-once processing.
|
|
73
|
+
|
|
74
|
+
**Application**: Building real-time systems, implementing audit trails, designing temporal queries, handling high-frequency data updates.
|
|
75
|
+
|
|
76
|
+
### 12. **Domain-Driven Design (DDD)**
|
|
77
|
+
Apply strategic and tactical DDD principles. Identify bounded contexts, establish ubiquitous language, design aggregates and entities. Integrate multiple bounded contexts through context mapping.
|
|
78
|
+
|
|
79
|
+
**Application**: Large-scale system design, team organization around domains, reducing coupling in complex domains, managing legacy system boundaries.
|
|
80
|
+
|
|
81
|
+
### 13. **Architecture Decision Records (ADRs)**
|
|
82
|
+
Document architectural decisions with context, alternatives, rationale, and consequences. Create living documents that explain trade-offs and inform future design. Establish decision frameworks for consistency.
|
|
83
|
+
|
|
84
|
+
**Application**: Maintaining system knowledge, onboarding new team members, tracking architectural evolution, justifying technical decisions.
|
|
85
|
+
|
|
86
|
+
### 14. **Technology Selection**
|
|
87
|
+
Evaluate and select technologies that fit architectural requirements. Consider operational burden, vendor lock-in, community support, licensing, and team expertise. Document technology decisions and rationale.
|
|
88
|
+
|
|
89
|
+
**Application**: Choosing databases, frameworks, languages, infrastructure platforms, evaluating open-source vs. commercial solutions.
|
|
90
|
+
|
|
91
|
+
### 15. **Evolutionary Architecture**
|
|
92
|
+
Design systems that can be modified incrementally without rewriting. Plan for incremental modernization, strangler pattern migrations, and feature flags. Balance current requirements with future flexibility.
|
|
93
|
+
|
|
94
|
+
**Application**: Migrating monoliths to microservices, upgrading frameworks, adopting new patterns, managing technical debt strategically.
|
|
95
|
+
|
|
96
|
+
### 16. **Observability Architecture**
|
|
97
|
+
Design systems with comprehensive logging, metrics, and tracing. Plan for structured logging, distributed tracing, metrics collection, and alert strategies. Enable rapid diagnosis of failures.
|
|
98
|
+
|
|
99
|
+
**Application**: Implementing distributed tracing, designing metrics hierarchies, establishing logging standards, planning observability for complex systems.
|
|
100
|
+
|
|
101
|
+
### 17. **Configuration Management**
|
|
102
|
+
Design configuration strategies that balance security, flexibility, and consistency. Manage environment-specific configurations, secrets, feature flags. Enable rapid iterations without redeployment.
|
|
103
|
+
|
|
104
|
+
**Application**: Multi-environment configuration, secrets management, feature flag architecture, environment parity.
|
|
105
|
+
|
|
106
|
+
### 18. **Dependency Management**
|
|
107
|
+
Design systems with minimal and well-understood dependencies. Manage version compatibility, plan for dependency upgrades, monitor for vulnerabilities. Establish clear dependency policies.
|
|
108
|
+
|
|
109
|
+
**Application**: Monorepo strategies, package management, managing transitive dependencies, planning dependency updates.
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Specific Domains & Tools
|
|
114
|
+
|
|
115
|
+
### Architecture Patterns
|
|
116
|
+
- **Monolithic**: Vertical slices, layered architecture, hexagonal architecture
|
|
117
|
+
- **Distributed**: Microservices, service mesh, distributed monolith
|
|
118
|
+
- **Event-Driven**: Event sourcing, CQRS, saga patterns
|
|
119
|
+
- **Data-Intensive**: Stream processing, batch processing, lambda architecture
|
|
120
|
+
|
|
121
|
+
### Design Patterns
|
|
122
|
+
- Creational: Factory, Builder, Singleton
|
|
123
|
+
- Structural: Facade, Proxy, Adapter, Decorator
|
|
124
|
+
- Behavioral: Observer, Strategy, Command, Mediator, State
|
|
125
|
+
|
|
126
|
+
### Integration Patterns
|
|
127
|
+
- Synchronous: REST, RPC, gRPC
|
|
128
|
+
- Asynchronous: Message queues, event streams, webhooks
|
|
129
|
+
- Choreography vs. Orchestration
|
|
130
|
+
|
|
131
|
+
### Tools & Frameworks
|
|
132
|
+
- Architecture Documentation: C4 Model, ArchiMate, UML
|
|
133
|
+
- Visualization: Draw.io, Lucidchart, Architecture Decision Records
|
|
134
|
+
- Analysis: Architecture linters, dependency analyzers, design review tools
|
|
135
|
+
- Code-Based Architecture: ArchUnit, NDepend, SonarQube
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
## Best Practices
|
|
140
|
+
|
|
141
|
+
1. **Start with Requirements**: Architecture must serve business and technical requirements. Understand scalability targets, consistency requirements, resilience needs before designing.
|
|
142
|
+
|
|
143
|
+
2. **Design for Change**: Assume requirements will evolve. Design for incremental modification, not perfection. Plan for refactoring and modernization.
|
|
144
|
+
|
|
145
|
+
3. **Minimize Coupling**: Reduce dependencies between components. Use contracts and interfaces. Design for independent deployment and testing.
|
|
146
|
+
|
|
147
|
+
4. **Explicit Trade-offs**: Every architectural decision involves trade-offs. Document alternatives considered and rationale. Make trade-offs visible to stakeholders.
|
|
148
|
+
|
|
149
|
+
5. **Validate Assumptions**: Test architectural decisions early. Build proof-of-concepts for critical decisions. Validate scalability, consistency, and resilience assumptions.
|
|
150
|
+
|
|
151
|
+
6. **Consistency in Patterns**: Use consistent patterns across the system. Establish conventions that reduce cognitive load. Document patterns clearly.
|
|
152
|
+
|
|
153
|
+
7. **Design for Observability**: Build systems that can be understood in production. Plan for debugging, monitoring, and alerting. Make failure modes visible.
|
|
154
|
+
|
|
155
|
+
8. **Plan for Evolution**: Design systems that can evolve over time. Plan for technology upgrades, pattern changes, and team scaling. Avoid architectural lock-in.
|
|
156
|
+
|
|
157
|
+
9. **Document Rationale**: Explain why architectural decisions were made. Document trade-offs and alternatives. Enable future teams to make informed decisions.
|
|
158
|
+
|
|
159
|
+
10. **Review Continuously**: Regularly review architecture against requirements. Adjust as requirements change. Plan for incremental improvement.
|
|
160
|
+
|
|
161
|
+
---
|
|
162
|
+
|
|
163
|
+
## Deliverables
|
|
164
|
+
|
|
165
|
+
- **Architecture Diagrams**: System context diagrams, component diagrams, deployment diagrams, data flow diagrams
|
|
166
|
+
- **Architecture Decision Records**: Documented decisions with rationale and trade-offs
|
|
167
|
+
- **Component Specifications**: Clear component boundaries, interfaces, responsibilities, and interactions
|
|
168
|
+
- **Data Architecture**: Schema designs, data models, consistency strategies, backup and recovery plans
|
|
169
|
+
- **Integration Plans**: API specifications, integration patterns, data exchange mechanisms
|
|
170
|
+
- **Scalability Analysis**: Bottleneck identification, growth projections, scaling strategies
|
|
171
|
+
- **Security Architecture**: Threat models, access control design, encryption strategies
|
|
172
|
+
- **Resilience Plans**: Failure mode analysis, mitigation strategies, recovery procedures
|
|
173
|
+
- **Technology Selection Report**: Evaluation of alternatives with rationale
|
|
174
|
+
- **Migration & Evolution Roadmap**: Phased approach for architectural changes
|
|
175
|
+
|
|
176
|
+
---
|
|
177
|
+
|
|
178
|
+
## Success Criteria
|
|
179
|
+
|
|
180
|
+
1. **Requirements Alignment**: Architecture clearly addresses all stated requirements and constraints
|
|
181
|
+
2. **Clear Decomposition**: Components have clear boundaries and can be understood independently
|
|
182
|
+
3. **Stakeholder Alignment**: Architecture decisions are understood and agreed upon by stakeholders
|
|
183
|
+
4. **Flexibility**: System can be modified incrementally without major rewrites
|
|
184
|
+
5. **Scalability**: Architecture can accommodate growth in load, data, and complexity
|
|
185
|
+
6. **Maintainability**: New team members can understand the system structure within reasonable timeframes
|
|
186
|
+
7. **Resilience**: System handles failures gracefully without cascading impacts
|
|
187
|
+
8. **Documentation**: Architecture is documented thoroughly with rationale for decisions
|
|
188
|
+
9. **Consistency**: Patterns are applied consistently across the system
|
|
189
|
+
10. **Risk Mitigation**: Technical risks are identified and mitigated proactively
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# Design Architecture
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
|
|
5
|
+
The **Design Architecture** skill enables AI models to create and refine user interfaces, interaction patterns, and design systems that are intuitive, accessible, scalable, and maintain visual consistency across products and platforms.
|
|
6
|
+
|
|
7
|
+
This skill balances aesthetics, functionality, and user experience with technical feasibility and business goals.
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Goals
|
|
12
|
+
|
|
13
|
+
* Create intuitive user interfaces
|
|
14
|
+
* Design accessible experiences
|
|
15
|
+
* Build scalable design systems
|
|
16
|
+
* Maintain visual consistency
|
|
17
|
+
* Improve user satisfaction
|
|
18
|
+
* Enable rapid iteration
|
|
19
|
+
* Support multiple platforms
|
|
20
|
+
* Balance aesthetics and function
|
|
21
|
+
|
|
22
|
+
---
|
|
23
|
+
|
|
24
|
+
# Capabilities
|
|
25
|
+
|
|
26
|
+
## Design Systems
|
|
27
|
+
* Component libraries
|
|
28
|
+
* Design tokens
|
|
29
|
+
* Pattern documentation
|
|
30
|
+
* Style guides
|
|
31
|
+
|
|
32
|
+
## Interface Design
|
|
33
|
+
* Information architecture
|
|
34
|
+
* Navigation design
|
|
35
|
+
* Form design
|
|
36
|
+
* Layout composition
|
|
37
|
+
|
|
38
|
+
## User Experience
|
|
39
|
+
* User research
|
|
40
|
+
* Accessibility design
|
|
41
|
+
* Responsive design
|
|
42
|
+
* Interaction design
|
|
43
|
+
|
|
44
|
+
## Visual Design
|
|
45
|
+
* Typography systems
|
|
46
|
+
* Color systems
|
|
47
|
+
* Motion design
|
|
48
|
+
* Branding consistency
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
# When to Use
|
|
53
|
+
|
|
54
|
+
* Creating design systems
|
|
55
|
+
* Designing user interfaces
|
|
56
|
+
* Improving accessibility
|
|
57
|
+
* Establishing design standards
|
|
58
|
+
* Redesigning products
|
|
59
|
+
* Creating prototypes
|
|
60
|
+
* Conducting design reviews
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
# Expected Workflow
|
|
65
|
+
|
|
66
|
+
```
|
|
67
|
+
Understand Users & Goals
|
|
68
|
+
↓
|
|
69
|
+
Research & Analyze
|
|
70
|
+
↓
|
|
71
|
+
Define Information Architecture
|
|
72
|
+
↓
|
|
73
|
+
Create Wireframes
|
|
74
|
+
↓
|
|
75
|
+
Design Mockups
|
|
76
|
+
↓
|
|
77
|
+
Iterate Based on Feedback
|
|
78
|
+
↓
|
|
79
|
+
Handoff to Development
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
# Best Practices
|
|
85
|
+
|
|
86
|
+
Always:
|
|
87
|
+
* Research user needs
|
|
88
|
+
* Design for accessibility
|
|
89
|
+
* Maintain consistency
|
|
90
|
+
* Test designs with users
|
|
91
|
+
* Design for multiple devices
|
|
92
|
+
* Document decisions
|
|
93
|
+
* Iterate frequently
|
|
94
|
+
|
|
95
|
+
Never:
|
|
96
|
+
* Skip user research
|
|
97
|
+
* Ignore accessibility
|
|
98
|
+
* Create inconsistent interfaces
|
|
99
|
+
* Design without testing
|
|
100
|
+
* Assume mobile will work automatically
|
|
101
|
+
* Forget about edge cases
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
# Success Criteria
|
|
106
|
+
|
|
107
|
+
Successful design architecture creates intuitive interfaces, meets WCAG standards, maintains consistency, improves user satisfaction, and enables efficient development.
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
# Design Architecture Skill - Examples
|
|
2
|
+
|
|
3
|
+
This document contains practical examples demonstrating when and how to use the Design Architecture Skill.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Example 1 - Design System Creation
|
|
8
|
+
|
|
9
|
+
## User Request
|
|
10
|
+
Create a design system for this organization.
|
|
11
|
+
|
|
12
|
+
## Expected Behavior
|
|
13
|
+
* Define design tokens (colors, typography, spacing)
|
|
14
|
+
* Create component library
|
|
15
|
+
* Document design patterns
|
|
16
|
+
* Establish governance model
|
|
17
|
+
* Create usage guidelines
|
|
18
|
+
* Plan for scale
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
# Example 2 - Information Architecture
|
|
23
|
+
|
|
24
|
+
## User Request
|
|
25
|
+
Redesign the information architecture for this complex product.
|
|
26
|
+
|
|
27
|
+
## Expected Behavior
|
|
28
|
+
* Analyze current structure
|
|
29
|
+
* Identify usability issues
|
|
30
|
+
* Propose new hierarchy
|
|
31
|
+
* Design navigation
|
|
32
|
+
* Create wireframes
|
|
33
|
+
* User test with mockups
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
# Example 3 - Accessibility Audit
|
|
38
|
+
|
|
39
|
+
## User Request
|
|
40
|
+
Audit this interface for accessibility issues.
|
|
41
|
+
|
|
42
|
+
## Expected Behavior
|
|
43
|
+
* Check WCAG compliance
|
|
44
|
+
* Test keyboard navigation
|
|
45
|
+
* Verify color contrast
|
|
46
|
+
* Test screen readers
|
|
47
|
+
* Document issues
|
|
48
|
+
* Recommend fixes
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
# Example 4 - Dashboard Design
|
|
53
|
+
|
|
54
|
+
## User Request
|
|
55
|
+
Design a performance monitoring dashboard.
|
|
56
|
+
|
|
57
|
+
## Expected Behavior
|
|
58
|
+
* Define information needs
|
|
59
|
+
* Choose visualizations
|
|
60
|
+
* Organize layout
|
|
61
|
+
* Design interactions
|
|
62
|
+
* Create high-fidelity mockup
|
|
63
|
+
* Plan for responsiveness
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
# Example 5 - Form Optimization
|
|
68
|
+
|
|
69
|
+
## User Request
|
|
70
|
+
Redesign this user signup form for better conversion.
|
|
71
|
+
|
|
72
|
+
## Expected Behavior
|
|
73
|
+
* Analyze current form
|
|
74
|
+
* Simplify field requirements
|
|
75
|
+
* Design progressive disclosure
|
|
76
|
+
* Improve error handling
|
|
77
|
+
* Create high-fidelity mockup
|
|
78
|
+
* Plan user testing
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
# Success Criteria
|
|
83
|
+
|
|
84
|
+
Successful design architecture creates intuitive interfaces, maintains consistency, supports accessibility, and improves user satisfaction.
|
|
@@ -0,0 +1,192 @@
|
|
|
1
|
+
# Design Architecture Skill
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
|
|
5
|
+
The Design Architecture skill enables the creation and refinement of user interfaces, interaction patterns, and design systems that are intuitive, accessible, and scalable. This skill focuses on translating user needs and business requirements into cohesive visual and interaction designs that maximize usability while maintaining consistency across products and platforms. Design architecture balances aesthetics, functionality, and user experience with technical feasibility and business goals.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Table of Contents
|
|
10
|
+
|
|
11
|
+
1. [Core Competencies](#core-competencies)
|
|
12
|
+
2. [Specific Domains & Tools](#specific-domains--tools)
|
|
13
|
+
3. [Best Practices](#best-practices)
|
|
14
|
+
4. [Deliverables](#deliverables)
|
|
15
|
+
5. [Success Criteria](#success-criteria)
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Core Competencies
|
|
20
|
+
|
|
21
|
+
### 1. **Design System Architecture**
|
|
22
|
+
Create cohesive design systems that provide consistency across products. Define component libraries, design tokens (colors, typography, spacing), and patterns. Establish documentation and governance for design system evolution. Enable teams to build consistently without duplicating effort.
|
|
23
|
+
|
|
24
|
+
**Application**: Creating enterprise design systems, establishing component libraries, scaling design across multiple products, maintaining design consistency across platforms.
|
|
25
|
+
|
|
26
|
+
### 2. **Information Architecture**
|
|
27
|
+
Design how information is organized and accessed. Create clear hierarchies, navigation models, and mental models that users understand intuitively. Plan for content growth and changing user needs. Establish consistent organizational patterns.
|
|
28
|
+
|
|
29
|
+
**Application**: Designing information hierarchies, creating navigation systems, organizing content, planning user journeys, establishing mental models.
|
|
30
|
+
|
|
31
|
+
### 3. **Interaction Design**
|
|
32
|
+
Design how users interact with systems. Create clear affordances that guide users toward intended actions. Design responsive feedback mechanisms and progressive disclosure. Plan state transitions and edge cases. Ensure interactions feel natural and intentional.
|
|
33
|
+
|
|
34
|
+
**Application**: Designing user flows, creating interaction patterns, designing form interactions, planning error states, designing micro-interactions.
|
|
35
|
+
|
|
36
|
+
### 4. **Visual Hierarchy & Composition**
|
|
37
|
+
Use visual design principles to guide user attention and comprehension. Design with emphasis, contrast, alignment, and white space. Create visual relationships that communicate meaning and priority. Design for rapid scanning and information processing.
|
|
38
|
+
|
|
39
|
+
**Application**: Designing dashboards, creating report interfaces, designing content-heavy layouts, designing mobile interfaces, creating marketing sites.
|
|
40
|
+
|
|
41
|
+
### 5. **Accessibility & Inclusive Design**
|
|
42
|
+
Design systems that work for all users regardless of ability. Meet WCAG standards for color contrast, typography, keyboard navigation, and screen readers. Design with diverse user needs in mind. Plan for assistive technology compatibility.
|
|
43
|
+
|
|
44
|
+
**Application**: Ensuring color contrast meets WCAG AA, designing keyboard-navigable interfaces, creating alt text strategies, testing with assistive technologies.
|
|
45
|
+
|
|
46
|
+
### 6. **Responsive & Adaptive Design**
|
|
47
|
+
Design interfaces that work across devices and screen sizes. Plan for different input methods (touch, mouse, keyboard). Design flexible layouts and breakpoints. Optimize for performance on mobile devices.
|
|
48
|
+
|
|
49
|
+
**Application**: Designing mobile-first experiences, creating responsive layouts, designing for multiple device classes, optimizing mobile performance.
|
|
50
|
+
|
|
51
|
+
### 7. **Typography & Readability**
|
|
52
|
+
Design with typography that maximizes readability and conveys meaning. Choose typefaces that work across contexts. Plan font sizes, line heights, and spacing for different content types. Design for scannability.
|
|
53
|
+
|
|
54
|
+
**Application**: Establishing typography systems, designing for multilingual content, optimizing for web readability, creating reading experiences.
|
|
55
|
+
|
|
56
|
+
### 8. **Color & Visual Language**
|
|
57
|
+
Design color systems that convey meaning and emotion. Create accessible color combinations. Design for colorblind users. Establish visual languages that differentiate the product. Plan for dark mode and theming.
|
|
58
|
+
|
|
59
|
+
**Application**: Creating color systems, designing for semantic meaning with color, supporting dark mode, designing accessible color schemes.
|
|
60
|
+
|
|
61
|
+
### 9. **Motion & Animation**
|
|
62
|
+
Use motion purposefully to guide attention and communicate state. Design animations that feel natural and don't overwhelm. Create transitions that clarify relationships and changes. Plan for performance impact.
|
|
63
|
+
|
|
64
|
+
**Application**: Designing micro-interactions, creating loading states, designing transitions, planning for reduced-motion preferences.
|
|
65
|
+
|
|
66
|
+
### 10. **Form Design & Input**
|
|
67
|
+
Design forms that are intuitive and reduce friction. Plan progressive disclosure and validation feedback. Design for different input types and constraints. Minimize required fields and clear unnecessary steps.
|
|
68
|
+
|
|
69
|
+
**Application**: Designing sign-up flows, creating checkout flows, designing data entry interfaces, planning validation and error messaging.
|
|
70
|
+
|
|
71
|
+
### 11. **Data Visualization**
|
|
72
|
+
Design visual representations of complex data that communicate insights quickly. Choose appropriate chart types for data relationships. Design for multiple audience types. Plan for interactivity and drill-down patterns.
|
|
73
|
+
|
|
74
|
+
**Application**: Designing analytics dashboards, creating reports, designing real-time data displays, designing financial or statistical visualizations.
|
|
75
|
+
|
|
76
|
+
### 12. **Component Design & Composition**
|
|
77
|
+
Design reusable components that scale across systems. Define component variants and states. Create clear APIs for components. Plan for component composition and flexibility.
|
|
78
|
+
|
|
79
|
+
**Application**: Creating button systems, designing card components, creating input components, designing modal and dialog patterns.
|
|
80
|
+
|
|
81
|
+
### 13. **User Research & Validation**
|
|
82
|
+
Conduct research that informs design decisions. Plan user testing for proposed designs. Gather feedback early and iterate. Establish success metrics for design changes.
|
|
83
|
+
|
|
84
|
+
**Application**: Conducting usability tests, gathering user feedback, analyzing user behavior, validating design assumptions.
|
|
85
|
+
|
|
86
|
+
### 14. **Design Patterns & Conventions**
|
|
87
|
+
Establish recurring solutions to common design problems. Create pattern libraries for different contexts. Document when to use patterns. Plan for exceptions and edge cases.
|
|
88
|
+
|
|
89
|
+
**Application**: Creating empty states, designing error states, designing loading states, designing confirmation patterns.
|
|
90
|
+
|
|
91
|
+
### 15. **Responsive Navigation**
|
|
92
|
+
Design navigation systems that work across devices and contexts. Plan for changing screen sizes and content growth. Create navigation that doesn't overwhelm. Design for mobile navigation patterns.
|
|
93
|
+
|
|
94
|
+
**Application**: Designing desktop navigation, creating mobile navigation, designing hamburger menus, planning navigation patterns.
|
|
95
|
+
|
|
96
|
+
### 16. **Theming & Customization**
|
|
97
|
+
Design systems that support theming and customization. Create token systems for visual properties. Design for light/dark modes. Plan for user customization.
|
|
98
|
+
|
|
99
|
+
**Application**: Supporting multiple themes, designing dark mode, creating customizable interfaces, supporting brand customization.
|
|
100
|
+
|
|
101
|
+
### 17. **Onboarding & Tutorials**
|
|
102
|
+
Design onboarding experiences that help users understand systems. Create progressive disclosure that doesn't overwhelm. Guide users through key features. Measure onboarding effectiveness.
|
|
103
|
+
|
|
104
|
+
**Application**: Designing first-run experiences, creating feature tours, designing empty states, planning progressive onboarding.
|
|
105
|
+
|
|
106
|
+
### 18. **Performance & Optimization**
|
|
107
|
+
Design with performance in mind. Optimize visual assets, minimize rendering overhead, and plan for fast loading. Consider impact of design on performance. Design for low-bandwidth scenarios.
|
|
108
|
+
|
|
109
|
+
**Application**: Optimizing for fast loading, designing progressive rendering, planning image strategies, designing for slow networks.
|
|
110
|
+
|
|
111
|
+
---
|
|
112
|
+
|
|
113
|
+
## Specific Domains & Tools
|
|
114
|
+
|
|
115
|
+
### Design Systems & Tools
|
|
116
|
+
- **Component Libraries**: Storybook, Bit, Chromatic
|
|
117
|
+
- **Design Tools**: Figma, Adobe XD, Sketch
|
|
118
|
+
- **Design Systems**: Material Design, Carbon, Ant Design
|
|
119
|
+
- **Documentation**: Design system sites, component guides
|
|
120
|
+
|
|
121
|
+
### User Experience Domains
|
|
122
|
+
- **Web Applications**: Dashboard design, SaaS interfaces, data-heavy applications
|
|
123
|
+
- **Mobile**: iOS, Android, responsive web design
|
|
124
|
+
- **Emerging**: Voice interfaces, AR/VR, wearables
|
|
125
|
+
|
|
126
|
+
### Research & Testing Methods
|
|
127
|
+
- **Usability Testing**: Remote testing, moderated sessions, unmoderated studies
|
|
128
|
+
- **User Research**: Interviews, surveys, analytics, user journey mapping
|
|
129
|
+
- **Prototyping**: Low-fidelity, high-fidelity, interactive prototypes
|
|
130
|
+
- **A/B Testing**: Multivariate testing, performance optimization
|
|
131
|
+
|
|
132
|
+
### Tools & Technologies
|
|
133
|
+
- **Prototyping**: Figma, Adobe XD, Sketch, InVision
|
|
134
|
+
- **Analytics**: Google Analytics, Segment, Mixpanel
|
|
135
|
+
- **Testing Tools**: UserTesting, Maze, Lookback
|
|
136
|
+
- **Accessibility**: Axe DevTools, WAVE, NVDA, JAWS
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## Best Practices
|
|
141
|
+
|
|
142
|
+
1. **User-Centered Design**: Keep user needs at the center of all design decisions. Research before designing. Validate with users.
|
|
143
|
+
|
|
144
|
+
2. **Consistency First**: Use consistent patterns, components, and interactions. Establish standards that enable users to predict behavior.
|
|
145
|
+
|
|
146
|
+
3. **Simplicity Over Complexity**: Remove unnecessary elements. Reduce cognitive load. Favor clarity over cleverness.
|
|
147
|
+
|
|
148
|
+
4. **Design for Accessibility**: Accessible design is good design for everyone. Plan for accessibility from the start, not as an afterthought.
|
|
149
|
+
|
|
150
|
+
5. **Progressive Disclosure**: Don't overwhelm users with options. Reveal complexity only when needed. Prioritize essential information.
|
|
151
|
+
|
|
152
|
+
6. **Test Early & Often**: Validate designs with users early. Don't wait for finished designs. Get feedback frequently.
|
|
153
|
+
|
|
154
|
+
7. **Design Systems for Scale**: Create reusable components and patterns. Reduce duplication. Enable faster iteration.
|
|
155
|
+
|
|
156
|
+
8. **Responsive by Default**: Design for all screen sizes. Prioritize mobile. Test on real devices.
|
|
157
|
+
|
|
158
|
+
9. **Performance First**: Design with performance in mind. Optimize visual assets. Consider impact on user experience.
|
|
159
|
+
|
|
160
|
+
10. **Iterate Based on Data**: Use analytics and user testing to inform decisions. Measure impact of design changes. Plan for continuous improvement.
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## Deliverables
|
|
165
|
+
|
|
166
|
+
- **Design System Documentation**: Component library, design tokens, patterns, usage guidelines
|
|
167
|
+
- **Wireframes**: Low-fidelity representations of interface layouts and flows
|
|
168
|
+
- **High-Fidelity Mockups**: Detailed visual designs with colors, typography, imagery
|
|
169
|
+
- **Prototypes**: Interactive prototypes demonstrating user flows and interactions
|
|
170
|
+
- **User Flows**: Diagram of user journeys and interaction sequences
|
|
171
|
+
- **Design Patterns**: Documented solutions for recurring design problems
|
|
172
|
+
- **Style Guide**: Typography, color, spacing, and visual language documentation
|
|
173
|
+
- **Accessibility Audit**: Compliance assessment against WCAG guidelines
|
|
174
|
+
- **Research Findings**: User research insights and usability test results
|
|
175
|
+
- **Design Specifications**: Detailed specifications for developers (spacing, sizing, states)
|
|
176
|
+
- **Animation Guide**: Motion principles, animation timing, transition specifications
|
|
177
|
+
- **Component Specifications**: Detailed component definitions with variants and states
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## Success Criteria
|
|
182
|
+
|
|
183
|
+
1. **User Satisfaction**: Users find interfaces intuitive and easy to use (measured through NPS, satisfaction surveys)
|
|
184
|
+
2. **Accessibility**: Interfaces meet WCAG AA standards and work with assistive technologies
|
|
185
|
+
3. **Consistency**: Design patterns and components are applied consistently throughout product
|
|
186
|
+
4. **Usability**: Users accomplish primary tasks with minimal friction (measured through task success rates)
|
|
187
|
+
5. **Performance**: Design doesn't negatively impact page load time or responsiveness
|
|
188
|
+
6. **Scalability**: Design system enables consistent design across multiple products and teams
|
|
189
|
+
7. **Adoption**: Design system components used for >80% of new features (no reinvention)
|
|
190
|
+
8. **Alignment**: Design aligns with brand identity and business goals
|
|
191
|
+
9. **Flexibility**: System accommodates different contexts and content without requiring redesign
|
|
192
|
+
10. **Maintainability**: Design system is documented and easy for teams to understand and extend
|