@teckedd-code2save/b2dp 1.0.1 → 1.1.0

package/skills/frontend-design-review/references/quick-checklist.md

@@ -0,0 +1,38 @@
+# Quick Checklist
+
+Before approving any UI work:
+
+## Design System Compliance
+- [ ] Component verified in your Figma Design System
+- [ ] Component implementation checked in your Component Library
+- [ ] Figma Dev Mode specs followed (spacing, tokens, typography)
+- [ ] Design tokens used (no hardcoded hex colors or pixel values)
+- [ ] Token imports verified in code
+- [ ] All variants/states implemented as designed in Figma
+- [ ] Spacing measurements match Figma Dev Mode exactly
+- [ ] Deviations documented with design approval
+
+## Aesthetic Quality (especially for new designs)
+- [ ] Clear conceptual direction (not generic overused fonts and cliched schemes)
+- [ ] Distinctive typography (avoid overused fonts)
+- [ ] Cohesive color palette with CSS variables
+- [ ] Intentional motion (staggered reveals, hover states)
+- [ ] Visual interest through composition (asymmetry, overlap, grid-breaking)
+- [ ] Atmosphere through backgrounds (gradients, textures, patterns)
+- [ ] Implementation complexity matches vision
+
+## Frictionless
+- [ ] Core task completable efficiently (≤3 interactions)
+- [ ] Single clear primary action per view
+
+## Quality Craft
+- [ ] Uses design system components (verified in Figma)
+- [ ] Design tokens used (no hardcoded values)
+- [ ] Distinctive aesthetic (not generic overused fonts/cliched schemes)
+- [ ] Accessible (Grade C minimum, Grade B ideal)
+- [ ] Keyboard navigation complete
+- [ ] Tested in light/dark/high contrast modes
+
+## Trustworthy
+- [ ] AI-generated content has disclaimer
+- [ ] Error messages are actionable

package/skills/frontend-design-review/references/review-output-format.md

@@ -0,0 +1,68 @@
+# Review Output Format
+
+```
+## Frontend Design Review: [Component/Feature Name]
+
+### Context
+- **Purpose**: What problem does this solve? Who uses it?
+- **Aesthetic Direction**: [If new design: describe the bold conceptual direction]
+- **User Task**: What is the user trying to accomplish?
+
+### Summary
+[Pass/Needs Work/Blocked] - [One-line assessment]
+
+### Design System Compliance (if applicable)
+- [ ] Component exists in [Your Figma Design System]
+- [ ] Component usage verified in [Your Component Library]
+- [ ] Implementation matches Figma specs (spacing, colors, typography)
+- [ ] Uses design tokens (not hardcoded values) - verified in code
+- [ ] All variants match design system options
+- [ ] Spacing verified against Figma Dev Mode
+- [ ] Documented exception if deviating from design system
+
+### Aesthetic Quality (especially for new designs)
+- [ ] Clear conceptual direction (not generic AI aesthetic)
+- [ ] Distinctive typography choices
+- [ ] Cohesive color palette with CSS variables
+- [ ] Intentional motion and micro-interactions
+- [ ] Spatial composition creates visual interest
+- [ ] Backgrounds and visual details add atmosphere
+
+### Pillar Assessment
+
+| Pillar | Status | Notes |
+|--------|--------|-------|
+| Frictionless | 🟢/🟠/⚫ | Task completion efficient, primary action clear |
+| Quality Craft | 🟢/🟠/⚫ | Design system compliant, aesthetic distinctive, accessible |
+| Trustworthy | 🟢/🟠/⚫ | AI disclaimers present, errors actionable |
+
+**Legend:** 🟢 Pass | 🟠 Needs attention | ⚫ Blocking issue
+
+### Design Critique
+**Verdict:** [Pass / Needs work / Reach out to design for more support]
+
+**Rationale:** [Brief explanation based on pillar assessment, design system compliance, and aesthetic direction]
+
+**Criteria:**
+- **Pass**: All pillars 🟢 or minor 🟠 that don't block user tasks, design system compliant, clear aesthetic direction
+- **Needs work**: Multiple 🟠 or any critical workflow issues, design system deviations, or generic aesthetic choices
+- **Reach out to design for more support**: Any ⚫ blocking issues, fundamental pattern problems, major design system violations, or need for aesthetic direction
+
+### Issues
+
+**Blocking (must fix before merge):**
+1. [Pillar/Design System/Aesthetic] Issue description + recommendation with link
+
+**Major (should fix):**
+1. [Pillar/Design System/Aesthetic] Issue description + pattern suggestion with reference
+
+**Minor (consider for refinement):**
+1. [Pillar/Design System/Aesthetic] Issue description + optional improvement
+
+### Recommendations
+- [Design system component to use with link]
+- [Specific code change with design token reference]
+- [Typography recommendation for better aesthetic direction]
+- [Motion/animation suggestion]
+- [Link to design system in Figma]
+```

package/skills/frontend-design-review/references/review-type-modifiers.md

@@ -0,0 +1,31 @@
+# Review Type Modifiers
+
+Adjust focus based on review context:
+
+## PR Review
+- **Focus**: Code implementation, design system component usage, design token usage, accessibility in code
+- **Check**: Proper imports, design tokens used (not hardcoded), ARIA attributes present
+- **Verify**: Component matches Figma specs using Dev Mode
+
+## Creative Frontend Review
+- **Focus**: Aesthetic direction, typography choices, visual distinctiveness, motion design
+- **Check**: Clear conceptual intent, avoiding generic AI patterns, cohesive execution
+- **Verify**: Implementation complexity matches vision (maximalist needs elaborate code, minimalist needs precision)
+
+## Design Review
+- **Focus**: User flows, interaction patterns, visual hierarchy, navigation, design system alignment
+- **Check**: Task completion path, action hierarchy, progressive disclosure
+- **Verify**: All components exist in design system or have documented exceptions
+
+## Accessibility Audit
+- **Focus**: Deep dive Quality Craft pillar
+- **Check**: Keyboard testing, screen reader testing, contrast ratios, ARIA patterns
+- **Test with**: Screen readers (NVDA, JAWS, Narrator), keyboard only, 200% zoom
+- **Verify**: Design system accessibility features are properly implemented
+
+## Design System Compliance Audit
+- **Focus**: Deep dive design system usage
+- **Check**: All components match Figma specs, design tokens used throughout, no hardcoded values
+- **Test**: Compare implementation side-by-side with Figma using Dev Mode
+- **Verify**: Component variants, spacing, colors, typography all match design system
+- **Document**: Any deviations with rationale and plan to align

package/skills/infrastructure-as-code-architect/SKILL.md

@@ -0,0 +1,56 @@
+---
+name: infrastructure-as-code-architect
+description: Translates local database and cache requirements (e.g. docker-compose setup with Postgres, Redis, Elasticsearch) into production-ready Infrastructure as Code using Terraform, Pulumi, or Bicep for AWS, Azure, or GCP. Use when a user wants to deploy their application or data platform to the cloud.
+---
+
+# Infrastructure as Code Architect
+
+Translate local development setups (like a loaded `docker-compose.yml`) into enterprise-ready, production infrastructure deployments using Terraform, Pulumi, or Bicep.
+
+## 🎯 When to Use
+- After a data platform is generated using the `business-to-data-platform` skill.
+- When the user asks "How do I deploy this?" or "Can you write the Terraform for this?"
+- When migrating from a local Docker environment to managed cloud services (e.g., AWS RDS, Azure Cache for Redis).
+- When standing up fresh environments (staging, production).
+
+## 🛠️ Step-by-Step Workflow
+
+### 1. Identify Existing Requirements
+1. Scan the current project for `docker-compose.yml`, `.env.example`, and package files.
+2. Identify the core components:
+   - Database (PostgreSQL, MySQL, etc.)
+   - Cache/Message Queue (Redis, RabbitMQ)
+   - Search/Analytics (Elasticsearch, OpenSearch)
+   - Application Runtimes (Node.js, Python FastAPI, .NET)
+
+### 2. Determine the Target Cloud and Tool
+Ask the user if they have a preference for:
+- **Cloud Provider:** AWS, Azure, or GCP?
+- **Tool:** Terraform, Pulumi, or Bicep (Azure only)?
+
+If they don't have a preference, default to **Terraform** on **AWS**.
+
+### 3. Generate Infrastructure Code
+Create the necessary IaC files (Terraform, Pulumi, or Bicep). 
+
+**Container Mandate:**
+- **Docker**: Always generate a production-ready `Dockerfile` for each application component. Implement multi-stage builds for smaller images and security scan points.
+- **Kubernetes (K8s)**: For production-grade platforms, map local `docker-compose` services to **K8s Manifests** or **Helm Charts**. 
+
+| Local Component | Managed K8s Equivalent | AWS RDS/ElastiCache Equivalent |
+| :--- | :--- | :--- |
+| PostgreSQL | EKS / AKS / GKE (via StatefulSet) | Amazon RDS |
+| Redis | EKS / AKS / GKE | Amazon ElastiCache |
+| App Container | K8s Deployment + Service | App Runner / Container Apps |
+
+### 4. Implement CI/CD (GitHub Actions Mandate)
+**MANDATORY:** Provide a complete `.github/workflows/deploy.yml` file that:
+1. **Builds and Pushes Docker Images**: Uses `docker/build-push-action` to push to ECR, ACR, or GCR.
+2. **Scans for Vulnerabilities**: Integrates Snyk or Trivy scans within the pipeline.
+3. **Applies Infrastructure**: Automatically runs IaC plan/apply from the pipeline.
+4. **Deploys to K8s**: Updates K8s deployments with the new image tag.
+
+### 5. Infrastructure Best Practices
+- **Security**: Private subnets only. No public IPs for DBs/Caches. Use Managed Identities/IAM Roles.
+- **State Management**: Use remote backends (S3/Blob/GCS) with locking.
+- **Observability**: Include basic monitoring/logging resources (CloudWatch, Azure Monitor).