@fenixforce/edition-pro 0.1.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/dist/api/approval-routes.d.ts +15 -0
- package/dist/api/fleet-routes.d.ts +23 -0
- package/dist/api/integration-routes.d.ts +17 -0
- package/dist/api/middleware.d.ts +37 -0
- package/dist/boot.d.ts +37 -0
- package/dist/business/approval-queue.d.ts +94 -0
- package/dist/business/arena.d.ts +71 -0
- package/dist/business/best-of-n.d.ts +68 -0
- package/dist/business/brainstorm.d.ts +42 -0
- package/dist/business/compile-checker.d.ts +50 -0
- package/dist/business/debate.d.ts +38 -0
- package/dist/business/fleet-budget.d.ts +69 -0
- package/dist/business/fleet-config.d.ts +125 -0
- package/dist/business/fleet.d.ts +85 -0
- package/dist/business/handoff.d.ts +56 -0
- package/dist/business/hat-system.d.ts +57 -0
- package/dist/business/index.d.ts +44 -0
- package/dist/business/integration-registry.d.ts +66 -0
- package/dist/business/node-pipeline.d.ts +62 -0
- package/dist/business/oracle.d.ts +64 -0
- package/dist/business/roles/index.d.ts +7 -0
- package/dist/business/roles/judge.d.ts +24 -0
- package/dist/business/roles/planner.d.ts +30 -0
- package/dist/business/roles/types.d.ts +37 -0
- package/dist/business/roles/worker.d.ts +25 -0
- package/dist/business/router.d.ts +75 -0
- package/dist/business/shared-memory.d.ts +85 -0
- package/dist/business/status-detector.d.ts +52 -0
- package/dist/business/swarm-registry.d.ts +63 -0
- package/dist/business/templates.d.ts +55 -0
- package/dist/business/workspace-manager.d.ts +105 -0
- package/dist/index.d.ts +21 -0
- package/dist/index.js +638 -0
- package/dist/infrastructure/pty-agent.d.ts +74 -0
- package/dist/migrations/migrate.d.ts +7 -0
- package/dist/migrations/runner.d.ts +49 -0
- package/dist/workspace/worktree.d.ts +69 -0
- package/package.json +37 -0
- package/skills/builtin/academic-researcher/SKILL.md +51 -0
- package/skills/builtin/advanced-recon/SKILL.md +75 -0
- package/skills/builtin/agent-governance/SKILL.md +122 -0
- package/skills/builtin/algorithmic-art/SKILL.md +55 -0
- package/skills/builtin/api-attack-surface-mapper/SKILL.md +88 -0
- package/skills/builtin/api-development/SKILL.md +147 -0
- package/skills/builtin/api-exploit-prover/SKILL.md +74 -0
- package/skills/builtin/api-integration/SKILL.md +73 -0
- package/skills/builtin/api-security-tester/SKILL.md +82 -0
- package/skills/builtin/api-test-executor/SKILL.md +62 -0
- package/skills/builtin/app-store-optimization/SKILL.md +46 -0
- package/skills/builtin/audio-tour-guide/SKILL.md +18 -0
- package/skills/builtin/auth-flow-operator/SKILL.md +70 -0
- package/skills/builtin/autonomous-rag/SKILL.md +21 -0
- package/skills/builtin/backend-development/SKILL.md +265 -0
- package/skills/builtin/binary-analysis-analyst/SKILL.md +61 -0
- package/skills/builtin/binary-analysis-core/SKILL.md +65 -0
- package/skills/builtin/binary-recon/SKILL.md +64 -0
- package/skills/builtin/blackboard-coordination/SKILL.md +56 -0
- package/skills/builtin/blog-to-podcast/SKILL.md +18 -0
- package/skills/builtin/blog-writing/SKILL.md +36 -0
- package/skills/builtin/brainstorming/SKILL.md +69 -0
- package/skills/builtin/brand-design/SKILL.md +42 -0
- package/skills/builtin/ci-cd-pipelines/SKILL.md +210 -0
- package/skills/builtin/cloud-infrastructure/SKILL.md +140 -0
- package/skills/builtin/code-review/SKILL.md +88 -0
- package/skills/builtin/code-review-analyst/SKILL.md +96 -0
- package/skills/builtin/code-review-recon/SKILL.md +64 -0
- package/skills/builtin/code-review-verifier/SKILL.md +55 -0
- package/skills/builtin/coding-agent-team/SKILL.md +13 -0
- package/skills/builtin/competitor-intelligence/SKILL.md +39 -0
- package/skills/builtin/content-engine/SKILL.md +82 -0
- package/skills/builtin/context7-docs/SKILL.md +145 -0
- package/skills/builtin/copywriting/SKILL.md +38 -0
- package/skills/builtin/corrective-rag/SKILL.md +19 -0
- package/skills/builtin/cost-optimization/SKILL.md +131 -0
- package/skills/builtin/crypto-vulnerability-analyst/SKILL.md +64 -0
- package/skills/builtin/customer-support/SKILL.md +48 -0
- package/skills/builtin/customer-voice-support/SKILL.md +43 -0
- package/skills/builtin/data-analysis/SKILL.md +57 -0
- package/skills/builtin/data-visualization/SKILL.md +33 -0
- package/skills/builtin/database-design/SKILL.md +119 -0
- package/skills/builtin/decision-helper/SKILL.md +84 -0
- package/skills/builtin/deep-research/SKILL.md +68 -0
- package/skills/builtin/deepwiki-research/SKILL.md +115 -0
- package/skills/builtin/dependency-audit/SKILL.md +46 -0
- package/skills/builtin/doc-coauthoring/SKILL.md +48 -0
- package/skills/builtin/docker-deployment/SKILL.md +243 -0
- package/skills/builtin/docx-generation/SKILL.md +135 -0
- package/skills/builtin/dry-run-harness/SKILL.md +61 -0
- package/skills/builtin/editor/SKILL.md +44 -0
- package/skills/builtin/email-drafter/SKILL.md +42 -0
- package/skills/builtin/error-handling/SKILL.md +82 -0
- package/skills/builtin/eval-harness/SKILL.md +197 -0
- package/skills/builtin/evaluation-framework/SKILL.md +51 -0
- package/skills/builtin/exploit-writer/SKILL.md +63 -0
- package/skills/builtin/fact-checker/SKILL.md +51 -0
- package/skills/builtin/filesystem-context/SKILL.md +47 -0
- package/skills/builtin/financial-coach/SKILL.md +18 -0
- package/skills/builtin/finding-chain-correlator/SKILL.md +70 -0
- package/skills/builtin/finding-verifier/SKILL.md +65 -0
- package/skills/builtin/frontend-design/SKILL.md +104 -0
- package/skills/builtin/frontend-development/SKILL.md +227 -0
- package/skills/builtin/frontend-slides/SKILL.md +155 -0
- package/skills/builtin/fullstack-project/SKILL.md +286 -0
- package/skills/builtin/game-development/SKILL.md +60 -0
- package/skills/builtin/git-workflow/SKILL.md +44 -0
- package/skills/builtin/i18n-localization/SKILL.md +38 -0
- package/skills/builtin/image-prompt-engineering/SKILL.md +37 -0
- package/skills/builtin/investment-research/SKILL.md +33 -0
- package/skills/builtin/investor-materials/SKILL.md +90 -0
- package/skills/builtin/javascript-surface-analyzer/SKILL.md +66 -0
- package/skills/builtin/markdown-reports/SKILL.md +68 -0
- package/skills/builtin/market-research/SKILL.md +69 -0
- package/skills/builtin/mcp-builder/SKILL.md +86 -0
- package/skills/builtin/meeting-notes/SKILL.md +47 -0
- package/skills/builtin/memory-safety-analyst/SKILL.md +61 -0
- package/skills/builtin/meta-controller/SKILL.md +44 -0
- package/skills/builtin/mixture-of-agents/SKILL.md +53 -0
- package/skills/builtin/monitoring-observability/SKILL.md +169 -0
- package/skills/builtin/negotiation-simulator/SKILL.md +24 -0
- package/skills/builtin/nestjs-development/SKILL.md +56 -0
- package/skills/builtin/nextjs-development/SKILL.md +55 -0
- package/skills/builtin/parallel-dispatch/SKILL.md +83 -0
- package/skills/builtin/pdf-generation/SKILL.md +169 -0
- package/skills/builtin/personal-finance/SKILL.md +17 -0
- package/skills/builtin/pev-workflow/SKILL.md +62 -0
- package/skills/builtin/planning-with-files/SKILL.md +59 -0
- package/skills/builtin/pptx-generation/SKILL.md +117 -0
- package/skills/builtin/prisma-orm/SKILL.md +48 -0
- package/skills/builtin/rag-database-routing/SKILL.md +38 -0
- package/skills/builtin/rapid-prototyping/SKILL.md +152 -0
- package/skills/builtin/react-development/SKILL.md +244 -0
- package/skills/builtin/react-native-mobile/SKILL.md +113 -0
- package/skills/builtin/refactoring/SKILL.md +39 -0
- package/skills/builtin/reflexive-metacognition/SKILL.md +29 -0
- package/skills/builtin/riper-workflow/SKILL.md +214 -0
- package/skills/builtin/security-audit/SKILL.md +113 -0
- package/skills/builtin/security-self-audit/SKILL.md +311 -0
- package/skills/builtin/self-evolving-agent/SKILL.md +28 -0
- package/skills/builtin/self-improvement-loop/SKILL.md +58 -0
- package/skills/builtin/semantic-search/SKILL.md +93 -0
- package/skills/builtin/seo-audit-team/SKILL.md +27 -0
- package/skills/builtin/seo-optimization/SKILL.md +49 -0
- package/skills/builtin/server-management/SKILL.md +190 -0
- package/skills/builtin/social-media-content/SKILL.md +50 -0
- package/skills/builtin/sprint-planner/SKILL.md +49 -0
- package/skills/builtin/strategic-compact/SKILL.md +61 -0
- package/skills/builtin/strategy-advisor/SKILL.md +51 -0
- package/skills/builtin/structured-thinking/SKILL.md +70 -0
- package/skills/builtin/subagent-development/SKILL.md +105 -0
- package/skills/builtin/system-design/SKILL.md +66 -0
- package/skills/builtin/systematic-debugging/SKILL.md +87 -0
- package/skills/builtin/tailwind-css/SKILL.md +55 -0
- package/skills/builtin/taint-flow-tracer/SKILL.md +89 -0
- package/skills/builtin/teaching-agent-team/SKILL.md +32 -0
- package/skills/builtin/tech-debt-manager/SKILL.md +67 -0
- package/skills/builtin/technical-documentation/SKILL.md +47 -0
- package/skills/builtin/test-driven-development/SKILL.md +70 -0
- package/skills/builtin/theme-factory/SKILL.md +244 -0
- package/skills/builtin/threat-model-generator/SKILL.md +105 -0
- package/skills/builtin/trust-layer/SKILL.md +43 -0
- package/skills/builtin/typescript-patterns/SKILL.md +61 -0
- package/skills/builtin/ui-ux-design/SKILL.md +75 -0
- package/skills/builtin/verification-before-completion/SKILL.md +41 -0
- package/skills/builtin/verification-loop/SKILL.md +120 -0
- package/skills/builtin/waf-bypass-agent/SKILL.md +97 -0
- package/skills/builtin/web-artifacts-builder/SKILL.md +117 -0
- package/skills/builtin/web-assessment-executor/SKILL.md +66 -0
- package/skills/builtin/web-exploit-prover/SKILL.md +58 -0
- package/skills/builtin/web-scraping/SKILL.md +63 -0
- package/skills/builtin/webapp-testing/SKILL.md +86 -0
- package/skills/builtin/webhook-development/SKILL.md +62 -0
- package/skills/builtin/writing-skills/SKILL.md +67 -0
- package/skills/builtin/xlsx-generation/SKILL.md +116 -0
|
@@ -0,0 +1,227 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: frontend-development
|
|
3
|
+
description: "Use this skill when the user asks to build a website, web page, landing page, web UI, HTML/CSS/JS project, or any browser-based interface. Triggers: 'build me a website', 'create a landing page', 'make a web app', 'HTML page', 'frontend', 'web UI', 'responsive layout', 'CSS', styling tasks, accessibility fixes, or any request to create something that runs in a browser. Covers HTML, CSS, JavaScript, responsive design, accessibility, and modern web standards."
|
|
4
|
+
license: MIT
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Frontend Development
|
|
8
|
+
|
|
9
|
+
## What This Skill Does
|
|
10
|
+
|
|
11
|
+
Build complete, production-quality web interfaces. HTML, CSS, JavaScript. Responsive layouts, accessibility, modern patterns. From single landing pages to multi-page sites.
|
|
12
|
+
|
|
13
|
+
## Before You Start
|
|
14
|
+
|
|
15
|
+
1. **Fetch current docs** via Context7 if using any CSS framework (Tailwind, Bootstrap) or JS library
|
|
16
|
+
2. **Check DeepWiki** if integrating with an unfamiliar frontend framework or build tool
|
|
17
|
+
3. **Ask the user** about target browsers, mobile requirements, and any existing design system
|
|
18
|
+
|
|
19
|
+
## Project Structure
|
|
20
|
+
|
|
21
|
+
### Single Page
|
|
22
|
+
```
|
|
23
|
+
index.html # Everything in one file for simple projects
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Multi-Page Site
|
|
27
|
+
```
|
|
28
|
+
project/
|
|
29
|
+
├── index.html
|
|
30
|
+
├── about.html
|
|
31
|
+
├── css/
|
|
32
|
+
│ └── styles.css
|
|
33
|
+
├── js/
|
|
34
|
+
│ └── main.js
|
|
35
|
+
├── assets/
|
|
36
|
+
│ └── images/
|
|
37
|
+
└── README.md
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## HTML Standards
|
|
41
|
+
|
|
42
|
+
Write semantic HTML5. Every page needs:
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<!DOCTYPE html>
|
|
46
|
+
<html lang="en">
|
|
47
|
+
<head>
|
|
48
|
+
<meta charset="UTF-8">
|
|
49
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
50
|
+
<meta name="description" content="Page description for SEO">
|
|
51
|
+
<title>Page Title</title>
|
|
52
|
+
</head>
|
|
53
|
+
<body>
|
|
54
|
+
<header>...</header>
|
|
55
|
+
<nav>...</nav>
|
|
56
|
+
<main>...</main>
|
|
57
|
+
<footer>...</footer>
|
|
58
|
+
</body>
|
|
59
|
+
</html>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Semantic elements over divs: `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>`. Use `<div>` only when no semantic element fits.
|
|
63
|
+
|
|
64
|
+
## CSS Patterns
|
|
65
|
+
|
|
66
|
+
### Layout (use modern CSS)
|
|
67
|
+
- **Flexbox** for one-dimensional layouts (navbars, card rows, centering)
|
|
68
|
+
- **CSS Grid** for two-dimensional layouts (page layouts, dashboards, galleries)
|
|
69
|
+
- **Container queries** for component-level responsiveness
|
|
70
|
+
- Never use floats for layout
|
|
71
|
+
|
|
72
|
+
### Responsive Design
|
|
73
|
+
```css
|
|
74
|
+
/* Mobile-first breakpoints */
|
|
75
|
+
/* Base styles = mobile */
|
|
76
|
+
@media (min-width: 768px) { /* Tablet */ }
|
|
77
|
+
@media (min-width: 1024px) { /* Desktop */ }
|
|
78
|
+
@media (min-width: 1440px) { /* Large desktop */ }
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Use `clamp()` for fluid typography: `font-size: clamp(1rem, 2.5vw, 2rem);`
|
|
82
|
+
|
|
83
|
+
### CSS Variables for Theming
|
|
84
|
+
```css
|
|
85
|
+
:root {
|
|
86
|
+
--color-primary: #2563eb;
|
|
87
|
+
--color-surface: #ffffff;
|
|
88
|
+
--color-text: #1a1a2e;
|
|
89
|
+
--radius: 8px;
|
|
90
|
+
--shadow: 0 2px 8px rgba(0,0,0,0.08);
|
|
91
|
+
--transition: 200ms ease;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@media (prefers-color-scheme: dark) {
|
|
95
|
+
:root {
|
|
96
|
+
--color-surface: #0f0f1a;
|
|
97
|
+
--color-text: #e2e2e8;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Animation
|
|
103
|
+
Prefer CSS transitions and animations over JavaScript. Use `prefers-reduced-motion`:
|
|
104
|
+
|
|
105
|
+
```css
|
|
106
|
+
@media (prefers-reduced-motion: reduce) {
|
|
107
|
+
*, *::before, *::after {
|
|
108
|
+
animation-duration: 0.01ms !important;
|
|
109
|
+
transition-duration: 0.01ms !important;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## JavaScript Patterns
|
|
115
|
+
|
|
116
|
+
### Modern JS (ES2022+)
|
|
117
|
+
- `const` and `let` only, never `var`
|
|
118
|
+
- Arrow functions for callbacks
|
|
119
|
+
- Template literals for string interpolation
|
|
120
|
+
- Optional chaining (`?.`) and nullish coalescing (`??`)
|
|
121
|
+
- `async/await` over `.then()` chains
|
|
122
|
+
- `fetch()` for HTTP requests
|
|
123
|
+
|
|
124
|
+
### DOM Manipulation
|
|
125
|
+
```javascript
|
|
126
|
+
// Query
|
|
127
|
+
const el = document.querySelector('.selector');
|
|
128
|
+
const els = document.querySelectorAll('.selector');
|
|
129
|
+
|
|
130
|
+
// Events (use delegation for dynamic content)
|
|
131
|
+
document.addEventListener('click', (e) => {
|
|
132
|
+
if (e.target.matches('.button')) {
|
|
133
|
+
handleClick(e.target);
|
|
134
|
+
}
|
|
135
|
+
});
|
|
136
|
+
|
|
137
|
+
// Create elements
|
|
138
|
+
const card = document.createElement('article');
|
|
139
|
+
card.className = 'card';
|
|
140
|
+
card.innerHTML = `<h3>${title}</h3><p>${description}</p>`;
|
|
141
|
+
container.appendChild(card);
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
### Form Handling
|
|
145
|
+
```javascript
|
|
146
|
+
const form = document.querySelector('form');
|
|
147
|
+
form.addEventListener('submit', async (e) => {
|
|
148
|
+
e.preventDefault();
|
|
149
|
+
const data = new FormData(form);
|
|
150
|
+
const body = Object.fromEntries(data);
|
|
151
|
+
|
|
152
|
+
try {
|
|
153
|
+
const res = await fetch('/api/submit', {
|
|
154
|
+
method: 'POST',
|
|
155
|
+
headers: { 'Content-Type': 'application/json' },
|
|
156
|
+
body: JSON.stringify(body)
|
|
157
|
+
});
|
|
158
|
+
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
159
|
+
const result = await res.json();
|
|
160
|
+
showSuccess(result);
|
|
161
|
+
} catch (err) {
|
|
162
|
+
showError(err.message);
|
|
163
|
+
}
|
|
164
|
+
});
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
## Accessibility Checklist
|
|
168
|
+
|
|
169
|
+
Every page must pass these checks:
|
|
170
|
+
|
|
171
|
+
- All images have `alt` text (decorative images get `alt=""`)
|
|
172
|
+
- All interactive elements are keyboard-accessible (Tab, Enter, Escape)
|
|
173
|
+
- Color contrast ratio meets WCAG AA (4.5:1 for text, 3:1 for large text)
|
|
174
|
+
- Form inputs have associated `<label>` elements
|
|
175
|
+
- Page has a single `<h1>` and heading hierarchy doesn't skip levels
|
|
176
|
+
- Focus states are visible (never `outline: none` without a replacement)
|
|
177
|
+
- ARIA attributes used correctly: `aria-label`, `aria-expanded`, `aria-hidden`
|
|
178
|
+
- Skip-to-content link for screen readers
|
|
179
|
+
- Language attribute on `<html>` tag
|
|
180
|
+
|
|
181
|
+
## Performance
|
|
182
|
+
|
|
183
|
+
- Images: use `loading="lazy"`, provide `width` and `height`, use modern formats (WebP, AVIF)
|
|
184
|
+
- Fonts: `font-display: swap`, preload critical fonts, limit to 2 families max
|
|
185
|
+
- CSS: critical styles inline in `<head>`, rest loaded async
|
|
186
|
+
- JS: `defer` attribute on scripts, avoid render-blocking
|
|
187
|
+
- Largest Contentful Paint target: under 2.5 seconds
|
|
188
|
+
|
|
189
|
+
## Verification
|
|
190
|
+
|
|
191
|
+
Before marking complete:
|
|
192
|
+
1. Open in browser and test all interactive elements
|
|
193
|
+
2. Resize to mobile, tablet, desktop widths
|
|
194
|
+
3. Tab through the page for keyboard accessibility
|
|
195
|
+
4. Check console for errors
|
|
196
|
+
5. Validate HTML at validator.w3.org (if available)
|
|
197
|
+
6. Test dark mode if implemented
|
|
198
|
+
|
|
199
|
+
## Integration with Other Skills
|
|
200
|
+
|
|
201
|
+
- **context7-docs:** Fetch current Tailwind/Bootstrap docs before using utility classes
|
|
202
|
+
- **react-development:** Use that skill instead when the user specifies React
|
|
203
|
+
- **frontend-design:** Use that skill for visual design direction and aesthetic choices
|
|
204
|
+
- **web-artifacts-builder:** Use that skill for self-contained single-file web tools
|
|
205
|
+
|
|
206
|
+
## Code Project Blocks (v0/Vercel pattern)
|
|
207
|
+
|
|
208
|
+
Group related files into coherent units. Present component + styles + tests + types together. When modifying existing code, show only changed sections with clear markers.
|
|
209
|
+
|
|
210
|
+
Give every task a descriptive name: "Creating authentication form" not "Writing code."
|
|
211
|
+
|
|
212
|
+
Default to shadcn/ui when available and no other library specified.
|
|
213
|
+
|
|
214
|
+
## Discussion-First (Lovable pattern)
|
|
215
|
+
|
|
216
|
+
Ambiguous requests: discuss purpose, audience, constraints before building.
|
|
217
|
+
Clear requests: build immediately.
|
|
218
|
+
Keep non-code responses under 2 lines unless detail is requested.
|
|
219
|
+
|
|
220
|
+
## Auto-SEO
|
|
221
|
+
|
|
222
|
+
Every page gets without being asked:
|
|
223
|
+
- `<title>` with descriptive content
|
|
224
|
+
- `<meta name="description">` with compelling summary
|
|
225
|
+
- Open Graph tags (og:title, og:description, og:image)
|
|
226
|
+
- Semantic HTML for crawlers
|
|
227
|
+
- `lang` attribute on `<html>`
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
# Frontend Slides
|
|
2
|
+
|
|
3
|
+
Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.
|
|
4
|
+
|
|
5
|
+
## When to Activate
|
|
6
|
+
|
|
7
|
+
- Creating a talk deck, pitch deck, workshop deck, or internal presentation
|
|
8
|
+
- Converting `.ppt` or `.pptx` slides into an HTML presentation
|
|
9
|
+
- Improving an existing HTML presentation's layout, motion, or typography
|
|
10
|
+
- Exploring presentation styles with a user who does not know their design preference yet
|
|
11
|
+
|
|
12
|
+
## Non-Negotiables
|
|
13
|
+
|
|
14
|
+
1. **Zero dependencies**: default to one self-contained HTML file with inline CSS and JS.
|
|
15
|
+
2. **Viewport fit is mandatory**: every slide must fit inside one viewport with no internal scrolling.
|
|
16
|
+
3. **Show, don't tell**: use visual previews instead of abstract style questionnaires.
|
|
17
|
+
4. **Distinctive design**: avoid generic purple-gradient, Inter-on-white, template-looking decks.
|
|
18
|
+
5. **Production quality**: keep code commented, accessible, responsive, and performant.
|
|
19
|
+
|
|
20
|
+
## Workflow
|
|
21
|
+
|
|
22
|
+
### 1. Detect Mode
|
|
23
|
+
|
|
24
|
+
Choose one path:
|
|
25
|
+
- **New presentation**: user has a topic, notes, or full draft
|
|
26
|
+
- **PPT conversion**: user has `.ppt` or `.pptx`
|
|
27
|
+
- **Enhancement**: user already has HTML slides and wants improvements
|
|
28
|
+
|
|
29
|
+
### 2. Discover Content
|
|
30
|
+
|
|
31
|
+
Ask only the minimum needed:
|
|
32
|
+
- purpose: pitch, teaching, conference talk, internal update
|
|
33
|
+
- length: short (5-10), medium (10-20), long (20+)
|
|
34
|
+
- content state: finished copy, rough notes, topic only
|
|
35
|
+
|
|
36
|
+
If the user has content, ask them to paste it before styling.
|
|
37
|
+
|
|
38
|
+
### 3. Discover Style
|
|
39
|
+
|
|
40
|
+
Default to visual exploration.
|
|
41
|
+
|
|
42
|
+
If the user already knows the desired preset, skip previews and use it directly.
|
|
43
|
+
|
|
44
|
+
Otherwise:
|
|
45
|
+
1. Ask what feeling the deck should create: impressed, energized, focused, inspired.
|
|
46
|
+
2. Generate **3 single-slide preview files** in `.ecc-design/slide-previews/`.
|
|
47
|
+
3. Each preview must be self-contained, show typography/color/motion clearly, and stay under roughly 100 lines of slide content.
|
|
48
|
+
4. Ask the user which preview to keep or what elements to mix.
|
|
49
|
+
|
|
50
|
+
### 4. Build the Presentation
|
|
51
|
+
|
|
52
|
+
Output either:
|
|
53
|
+
- `presentation.html`
|
|
54
|
+
- `[presentation-name].html`
|
|
55
|
+
|
|
56
|
+
Use an `assets/` folder only when the deck contains extracted or user-supplied images.
|
|
57
|
+
|
|
58
|
+
Required structure:
|
|
59
|
+
- semantic slide sections
|
|
60
|
+
- a viewport-safe CSS base
|
|
61
|
+
- CSS custom properties for theme values
|
|
62
|
+
- a presentation controller class for keyboard, wheel, and touch navigation
|
|
63
|
+
- Intersection Observer for reveal animations
|
|
64
|
+
- reduced-motion support
|
|
65
|
+
|
|
66
|
+
### 5. Enforce Viewport Fit
|
|
67
|
+
|
|
68
|
+
Treat this as a hard gate.
|
|
69
|
+
|
|
70
|
+
Rules:
|
|
71
|
+
- every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;`
|
|
72
|
+
- all type and spacing must scale with `clamp()`
|
|
73
|
+
- when content does not fit, split into multiple slides
|
|
74
|
+
- never solve overflow by shrinking text below readable sizes
|
|
75
|
+
- never allow scrollbars inside a slide
|
|
76
|
+
|
|
77
|
+
### 6. Validate
|
|
78
|
+
|
|
79
|
+
Check the finished deck at these sizes:
|
|
80
|
+
- 1920x1080
|
|
81
|
+
- 1280x720
|
|
82
|
+
- 768x1024
|
|
83
|
+
- 375x667
|
|
84
|
+
- 667x375
|
|
85
|
+
|
|
86
|
+
### 7. Deliver
|
|
87
|
+
|
|
88
|
+
At handoff:
|
|
89
|
+
- delete temporary preview files unless the user wants to keep them
|
|
90
|
+
- open the deck with the platform-appropriate opener when useful
|
|
91
|
+
- summarize file path, preset used, slide count, and easy theme customization points
|
|
92
|
+
|
|
93
|
+
## PPT / PPTX Conversion
|
|
94
|
+
|
|
95
|
+
For PowerPoint conversion:
|
|
96
|
+
1. Prefer `python3` with `python-pptx` to extract text, images, and notes.
|
|
97
|
+
2. If `python-pptx` is unavailable, ask whether to install it or fall back to a manual/export-based workflow.
|
|
98
|
+
3. Preserve slide order, speaker notes, and extracted assets.
|
|
99
|
+
4. After extraction, run the same style-selection workflow as a new presentation.
|
|
100
|
+
|
|
101
|
+
## Implementation Requirements
|
|
102
|
+
|
|
103
|
+
### HTML / CSS
|
|
104
|
+
|
|
105
|
+
- Use inline CSS and JS unless the user explicitly wants a multi-file project.
|
|
106
|
+
- Fonts may come from Google Fonts or Fontshare.
|
|
107
|
+
- Prefer atmospheric backgrounds, strong type hierarchy, and a clear visual direction.
|
|
108
|
+
- Use abstract shapes, gradients, grids, noise, and geometry rather than illustrations.
|
|
109
|
+
|
|
110
|
+
### JavaScript
|
|
111
|
+
|
|
112
|
+
Include:
|
|
113
|
+
- keyboard navigation
|
|
114
|
+
- touch / swipe navigation
|
|
115
|
+
- mouse wheel navigation
|
|
116
|
+
- progress indicator or slide index
|
|
117
|
+
- reveal-on-enter animation triggers
|
|
118
|
+
|
|
119
|
+
### Accessibility
|
|
120
|
+
|
|
121
|
+
- use semantic structure (`main`, `section`, `nav`)
|
|
122
|
+
- keep contrast readable
|
|
123
|
+
- support keyboard-only navigation
|
|
124
|
+
- respect `prefers-reduced-motion`
|
|
125
|
+
|
|
126
|
+
## Content Density Limits
|
|
127
|
+
|
|
128
|
+
| Slide type | Limit |
|
|
129
|
+
|------------|-------|
|
|
130
|
+
| Title | 1 heading + 1 subtitle + optional tagline |
|
|
131
|
+
| Content | 1 heading + 4-6 bullets or 2 short paragraphs |
|
|
132
|
+
| Feature grid | 6 cards max |
|
|
133
|
+
| Code | 8-10 lines max |
|
|
134
|
+
| Quote | 1 quote + attribution |
|
|
135
|
+
| Image | 1 image constrained by viewport |
|
|
136
|
+
|
|
137
|
+
## Style Presets
|
|
138
|
+
|
|
139
|
+
### Mood to Preset Mapping
|
|
140
|
+
|
|
141
|
+
| Mood | Good Presets |
|
|
142
|
+
|------|--------------|
|
|
143
|
+
| Impressed / Confident | Bold Signal, Electric Studio, Dark Botanical |
|
|
144
|
+
| Excited / Energized | Creative Voltage, Neon Cyber, Split Pastel |
|
|
145
|
+
| Calm / Focused | Notebook Tabs, Paper & Ink, Swiss Modern |
|
|
146
|
+
| Inspired / Moved | Dark Botanical, Vintage Editorial, Pastel Geometry |
|
|
147
|
+
|
|
148
|
+
## Anti-Patterns
|
|
149
|
+
|
|
150
|
+
- generic startup gradients with no visual identity
|
|
151
|
+
- system-font decks unless intentionally editorial
|
|
152
|
+
- bullet walls
|
|
153
|
+
- code blocks that need scrolling
|
|
154
|
+
- fixed-height content boxes that break on short screens
|
|
155
|
+
- invalid negated CSS functions like `-clamp(...)`
|
|
@@ -0,0 +1,286 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: fullstack-project
|
|
3
|
+
description: "Use this skill when the user asks to build a complete application with both frontend and backend, scaffold a new project from scratch, or create an end-to-end app. Triggers: 'build me an app', 'create a full application', 'fullstack', 'full-stack', 'scaffold a project', 'starter template', 'boilerplate', 'SaaS app', 'web application', or any request requiring both client and server code together."
|
|
4
|
+
license: MIT
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Fullstack Project Scaffolding
|
|
8
|
+
|
|
9
|
+
## What This Skill Does
|
|
10
|
+
|
|
11
|
+
Scaffold and build complete applications with frontend, backend, database, and deployment config. End-to-end project setup from zero to running app.
|
|
12
|
+
|
|
13
|
+
## Before You Start
|
|
14
|
+
|
|
15
|
+
1. **Context7:** Fetch docs for the chosen framework stack
|
|
16
|
+
2. **DeepWiki:** Research any unfamiliar libraries in the stack
|
|
17
|
+
3. **Ask the user** about their preferred stack if not specified. Default: Bun + Hono + React + PostgreSQL + TypeScript
|
|
18
|
+
|
|
19
|
+
## Stack Options
|
|
20
|
+
|
|
21
|
+
### Default (Fenix Native)
|
|
22
|
+
```
|
|
23
|
+
Runtime: Bun
|
|
24
|
+
Backend: Hono
|
|
25
|
+
Frontend: React + Vite
|
|
26
|
+
Database: PostgreSQL + Drizzle ORM
|
|
27
|
+
Auth: JWT + bcrypt
|
|
28
|
+
Styling: Tailwind CSS
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Common Alternatives
|
|
32
|
+
| Layer | Options |
|
|
33
|
+
|-------|---------|
|
|
34
|
+
| Runtime | Node.js, Deno |
|
|
35
|
+
| Backend | Express, Fastify, Next.js API routes, NestJS |
|
|
36
|
+
| Frontend | Next.js, Vue + Nuxt, Svelte + SvelteKit, Astro |
|
|
37
|
+
| Database | SQLite, MySQL, MongoDB, Supabase |
|
|
38
|
+
| ORM | Prisma, Drizzle, Kysely, TypeORM |
|
|
39
|
+
| Auth | Auth.js, Lucia, Clerk, Supabase Auth |
|
|
40
|
+
|
|
41
|
+
## Project Structure
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
project/
|
|
45
|
+
├── apps/
|
|
46
|
+
│ ├── web/ # Frontend
|
|
47
|
+
│ │ ├── src/
|
|
48
|
+
│ │ │ ├── components/ # Reusable UI components
|
|
49
|
+
│ │ │ ├── pages/ # Page components / routes
|
|
50
|
+
│ │ │ ├── hooks/ # Custom React hooks
|
|
51
|
+
│ │ │ ├── lib/ # API client, utilities
|
|
52
|
+
│ │ │ ├── styles/ # Global styles
|
|
53
|
+
│ │ │ └── App.tsx
|
|
54
|
+
│ │ ├── index.html
|
|
55
|
+
│ │ ├── vite.config.ts
|
|
56
|
+
│ │ └── package.json
|
|
57
|
+
│ └── server/ # Backend
|
|
58
|
+
│ ├── src/
|
|
59
|
+
│ │ ├── routes/
|
|
60
|
+
│ │ ├── services/
|
|
61
|
+
│ │ ├── middleware/
|
|
62
|
+
│ │ ├── db/
|
|
63
|
+
│ │ └── index.ts
|
|
64
|
+
│ ├── .env.example
|
|
65
|
+
│ └── package.json
|
|
66
|
+
├── packages/
|
|
67
|
+
│ └── shared/ # Shared types, validators
|
|
68
|
+
│ ├── src/
|
|
69
|
+
│ │ ├── types.ts
|
|
70
|
+
│ │ └── validators.ts
|
|
71
|
+
│ └── package.json
|
|
72
|
+
├── docker-compose.yml
|
|
73
|
+
├── package.json # Workspace root
|
|
74
|
+
├── tsconfig.base.json
|
|
75
|
+
└── README.md
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### Simpler Alternative (small projects)
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
project/
|
|
82
|
+
├── src/
|
|
83
|
+
│ ├── client/ # Frontend
|
|
84
|
+
│ ├── server/ # Backend
|
|
85
|
+
│ └── shared/ # Shared types
|
|
86
|
+
├── docker-compose.yml
|
|
87
|
+
├── package.json
|
|
88
|
+
└── README.md
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
Choose the simpler structure for MVPs and small projects. Use the monorepo structure for anything intended to grow.
|
|
92
|
+
|
|
93
|
+
## Scaffolding Workflow
|
|
94
|
+
|
|
95
|
+
### Phase 1: Foundation
|
|
96
|
+
```
|
|
97
|
+
1. Initialize project with package.json and tsconfig
|
|
98
|
+
2. Set up database schema and migrations
|
|
99
|
+
3. Create .env.example with all required variables
|
|
100
|
+
4. Build health check endpoint (/api/health)
|
|
101
|
+
5. Verify: server starts, DB connects, health returns 200
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Phase 2: Core Backend
|
|
105
|
+
```
|
|
106
|
+
1. Auth routes (register, login, logout, refresh)
|
|
107
|
+
2. Core resource CRUD routes
|
|
108
|
+
3. Input validation with Zod schemas
|
|
109
|
+
4. Error handling middleware
|
|
110
|
+
5. Verify: all routes respond correctly to valid and invalid input
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Phase 3: Frontend Shell
|
|
114
|
+
```
|
|
115
|
+
1. Vite + React setup with routing
|
|
116
|
+
2. API client with auth header injection
|
|
117
|
+
3. Login/register pages
|
|
118
|
+
4. Layout component with navigation
|
|
119
|
+
5. Verify: can register, login, and see authenticated pages
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Phase 4: Features + Polish
|
|
123
|
+
```
|
|
124
|
+
1. Build out feature pages
|
|
125
|
+
2. Loading states, error states, empty states
|
|
126
|
+
3. Responsive design pass
|
|
127
|
+
4. Docker Compose for local dev (app + db)
|
|
128
|
+
5. README with setup instructions
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## Essential Files
|
|
132
|
+
|
|
133
|
+
### docker-compose.yml (Local Development)
|
|
134
|
+
```yaml
|
|
135
|
+
services:
|
|
136
|
+
db:
|
|
137
|
+
image: postgres:16-alpine
|
|
138
|
+
environment:
|
|
139
|
+
POSTGRES_DB: appdb
|
|
140
|
+
POSTGRES_USER: appuser
|
|
141
|
+
POSTGRES_PASSWORD: devpassword
|
|
142
|
+
ports:
|
|
143
|
+
- "5432:5432"
|
|
144
|
+
volumes:
|
|
145
|
+
- pgdata:/var/lib/postgresql/data
|
|
146
|
+
|
|
147
|
+
volumes:
|
|
148
|
+
pgdata:
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
### .env.example
|
|
152
|
+
```
|
|
153
|
+
DATABASE_URL=postgresql://appuser:devpassword@localhost:5432/appdb
|
|
154
|
+
JWT_SECRET=change-me-in-production
|
|
155
|
+
PORT=3000
|
|
156
|
+
NODE_ENV=development
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### README.md Template
|
|
160
|
+
```markdown
|
|
161
|
+
# Project Name
|
|
162
|
+
|
|
163
|
+
One-line description.
|
|
164
|
+
|
|
165
|
+
## Setup
|
|
166
|
+
|
|
167
|
+
1. Clone and install: `bun install`
|
|
168
|
+
2. Start database: `docker compose up -d`
|
|
169
|
+
3. Run migrations: `bun run db:migrate`
|
|
170
|
+
4. Start dev server: `bun run dev`
|
|
171
|
+
|
|
172
|
+
## Environment Variables
|
|
173
|
+
|
|
174
|
+
Copy `.env.example` to `.env` and fill in values.
|
|
175
|
+
|
|
176
|
+
| Variable | Description | Required |
|
|
177
|
+
|----------|-------------|----------|
|
|
178
|
+
| DATABASE_URL | PostgreSQL connection string | Yes |
|
|
179
|
+
| JWT_SECRET | Secret for signing JWTs | Yes |
|
|
180
|
+
| PORT | Server port (default: 3000) | No |
|
|
181
|
+
|
|
182
|
+
## Scripts
|
|
183
|
+
|
|
184
|
+
| Command | Description |
|
|
185
|
+
|---------|-------------|
|
|
186
|
+
| `bun run dev` | Start development server |
|
|
187
|
+
| `bun run build` | Build for production |
|
|
188
|
+
| `bun run db:migrate` | Run database migrations |
|
|
189
|
+
| `bun run test` | Run tests |
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
## Rules
|
|
193
|
+
|
|
194
|
+
- Always create a working `.env.example` with every required variable documented
|
|
195
|
+
- Always include a `docker-compose.yml` for local database
|
|
196
|
+
- Always include a README with setup instructions that work from zero
|
|
197
|
+
- Shared types go in `packages/shared/` or `src/shared/`, never duplicated
|
|
198
|
+
- API client and server must agree on types (shared Zod schemas are ideal)
|
|
199
|
+
- Every route must have input validation
|
|
200
|
+
- Default to TypeScript strict mode
|
|
201
|
+
|
|
202
|
+
## Verification
|
|
203
|
+
|
|
204
|
+
Before marking complete:
|
|
205
|
+
1. `bun install` succeeds with no errors
|
|
206
|
+
2. `docker compose up -d` starts the database
|
|
207
|
+
3. `bun run dev` starts both frontend and backend
|
|
208
|
+
4. Registration and login work end to end
|
|
209
|
+
5. At least one CRUD resource works
|
|
210
|
+
6. README instructions work from a clean clone
|
|
211
|
+
|
|
212
|
+
## Integration with Other Skills
|
|
213
|
+
|
|
214
|
+
- **frontend-development:** Delegates frontend build details
|
|
215
|
+
- **backend-development:** Delegates API design details
|
|
216
|
+
- **database-design:** Delegates schema and migration strategy
|
|
217
|
+
- **docker-deployment:** Extends local Docker setup to production
|
|
218
|
+
- **context7-docs:** Fetch framework docs before scaffolding
|
|
219
|
+
|
|
220
|
+
## Spec-Driven Development (Kiro pattern)
|
|
221
|
+
|
|
222
|
+
Before writing any code, produce three documents in order:
|
|
223
|
+
|
|
224
|
+
### 1. requirements.md
|
|
225
|
+
User stories in "As a [role], I want [feature], so that [benefit]" format. Acceptance criteria in EARS format: "WHEN [event] THEN [system] SHALL [response]". Each requirement gets a unique ID (REQ-001).
|
|
226
|
+
|
|
227
|
+
### 2. design.md
|
|
228
|
+
Architecture decisions, component breakdown, interface definitions, data models, error handling strategy, and testing strategy. Include mermaid diagrams where they clarify structure.
|
|
229
|
+
|
|
230
|
+
### 3. tasks.md
|
|
231
|
+
Numbered checkbox list. Each task is a meaningful unit of work (~20 minutes for a professional developer). Tasks reference specific requirement IDs. Only coding tasks, no deployment or user testing.
|
|
232
|
+
|
|
233
|
+
**Each document requires user approval before proceeding to the next.** The agent cannot write implementation code during spec creation.
|
|
234
|
+
|
|
235
|
+
## Mock-First Development (Emergent E1 pattern)
|
|
236
|
+
|
|
237
|
+
After specs are approved:
|
|
238
|
+
|
|
239
|
+
1. Create `contracts.md` defining all API contracts (request/response shapes, status codes, error formats)
|
|
240
|
+
2. Build mock implementations for every API endpoint (return hardcoded valid responses)
|
|
241
|
+
3. Wire up the full flow with mocks. Verify the flow works end to end.
|
|
242
|
+
4. Replace mocks with real implementations one at a time
|
|
243
|
+
5. Test after each replacement. If a replacement breaks the flow, fix before proceeding.
|
|
244
|
+
|
|
245
|
+
This catches integration issues before real implementation begins.
|
|
246
|
+
|
|
247
|
+
## Dynamic Scaffolding
|
|
248
|
+
|
|
249
|
+
Adapt project structure based on complexity discovered during planning. Start with the simplest viable structure. Add layers (services, middleware, queues) only when a specific requirement demands them.
|
|
250
|
+
|
|
251
|
+
## Subagent Compilation Checker
|
|
252
|
+
|
|
253
|
+
For multi-module builds, delegate compile-checking to a subagent:
|
|
254
|
+
|
|
255
|
+
### Pattern
|
|
256
|
+
After making changes across multiple packages/modules:
|
|
257
|
+
1. Dispatch a compile-check subagent for each modified module
|
|
258
|
+
2. Each subagent runs `tsc --noEmit` (or equivalent) in its module
|
|
259
|
+
3. Collect results: which modules compile, which have errors
|
|
260
|
+
4. If errors found, fix in dependency order (shared → server → web)
|
|
261
|
+
|
|
262
|
+
### Implementation
|
|
263
|
+
```typescript
|
|
264
|
+
// Dispatch compile checks in parallel for each modified module
|
|
265
|
+
const modules = getModifiedModules(gitDiff);
|
|
266
|
+
const checks = modules.map((mod) => ({
|
|
267
|
+
agent: "compile-checker",
|
|
268
|
+
prompt: `Run type checking in ${mod.path}. Report any errors.`,
|
|
269
|
+
cwd: mod.path,
|
|
270
|
+
tools: ["bash"], // minimal tool access
|
|
271
|
+
}));
|
|
272
|
+
const results = await Promise.all(checks.map(dispatchSubagent));
|
|
273
|
+
|
|
274
|
+
// Fix in dependency order
|
|
275
|
+
const failures = results.filter((r) => r.errors.length > 0);
|
|
276
|
+
const sorted = topologicalSort(failures, dependencyGraph);
|
|
277
|
+
for (const failure of sorted) {
|
|
278
|
+
await fixCompileErrors(failure);
|
|
279
|
+
}
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
### Rules
|
|
283
|
+
- Always check shared/common packages first (they affect downstream)
|
|
284
|
+
- Compile check uses `--noEmit` (no artifacts, just validation)
|
|
285
|
+
- If a fix in module A causes a new error in module B, re-check B
|
|
286
|
+
- Maximum 3 fix iterations per module before escalating
|