Neue Skills, Referenzen & OpenWiki-Doku integriert
Umfangreiche Erweiterung der Skill-Bibliothek: Neue Skills für Humanisierung (Englisch/PT-BR), Design-Validierung, AI-SEO und Coolify-Deployment inkl. Regelwerke, Presets, Pattern-Referenzen, Testfälle und Automatisierungsskripte. Zusätzliche Skills für Revenue-Centric Design, Pier Cloud, OKF, Lebenslauf- und LinkedIn-Optimierung sowie zahlreiche Referenzdateien, Checklisten und YAML/JSON/Markdown-Templates. Einführung einer vollständigen OpenWiki-Dokumentation mit Architektur-, Domain- und Workflow-Beschreibungen, zentralem Index und automatisierten Updates. Modularer Aufbau, restriktive Lizenzen und umfassende Qualitäts- und Evaluationsmechanismen für alle neuen Inhalte.
This commit is contained in:
65
.github/skills/ultimate-design-system-master/references/prompt-09-design-to-code-translator.md
vendored
Normal file
65
.github/skills/ultimate-design-system-master/references/prompt-09-design-to-code-translator.md
vendored
Normal file
@@ -0,0 +1,65 @@
|
||||
PROMPT 9: The Design-to-Code Translator
|
||||
|
||||
You are a Design Engineer at Vercel, bridging design and development.
|
||||
|
||||
Convert this design into production-ready frontend code:
|
||||
|
||||
[DESIGN DESCRIPTION, WIREFRAME, OR COMPONENT SPECS]
|
||||
|
||||
Tech stack: [REACT/VUE/SV ELTE/NEXT.JS/TAILWIND/ETC.]
|
||||
|
||||
Deliverables:
|
||||
|
||||
1. COMPONENT ARCHITECTURE
|
||||
## Component hierarchy tree
|
||||
## Props interface definition (TypeScript)
|
||||
## State management strategy
|
||||
## Data flow diagram
|
||||
|
||||
2. PRODUCTION CODE
|
||||
## Complete, copy-paste ready component code
|
||||
## Responsive implementation (mobile-first)
|
||||
## Accessibility attributes (ARIA labels, roles, states)
|
||||
## Error boundaries and loading states
|
||||
## Animation/transition implementation
|
||||
|
||||
3. STYLING SPECIFICATIONS
|
||||
## CSS/Tailwind classes with design token mapping
|
||||
## CSS variables for theming
|
||||
## Dark mode implementation
|
||||
## Responsive breakpoints
|
||||
## Hover/focus/active states
|
||||
|
||||
4. DESIGN TOKEN INTEGRATION
|
||||
## Color tokens mapped to CSS variables
|
||||
## Typography tokens (font sizes, weights, line heights)
|
||||
## Spacing tokens (padding, margin, gap)
|
||||
## Shadow/elevation tokens
|
||||
## Border radius tokens
|
||||
|
||||
5. ASSET OPTIMIZATION
|
||||
## Image component with lazy loading
|
||||
## SVG optimization strategy
|
||||
## Icon system (SVG sprite or icon library)
|
||||
## Font loading strategy
|
||||
|
||||
6. PERFORMANCE CONSIDERATIONS
|
||||
## Code splitting recommendations
|
||||
## Bundle size optimization
|
||||
## Rendering optimization (React.memo, useMemo, etc.)
|
||||
## Image optimization (next/image or equivalent)
|
||||
|
||||
7. TESTING STRATEGY
|
||||
## Unit test cases (React Testing Library)
|
||||
## Visual regression test scenarios
|
||||
## Accessibility tests (axe-core)
|
||||
## Responsive test cases
|
||||
|
||||
8. DOCUMENTATION
|
||||
## JSDoc comments for all props
|
||||
## Usage examples (3 variations)
|
||||
## Do's and don'ts
|
||||
## Changelog template
|
||||
|
||||
Include "Designer's Intent" comments explaining why certain code decisions preserve the design vision.
|
||||
|
||||
Reference in New Issue
Block a user