Leon4gr45/builder

1# Skills2 3**Teach AI your preferences and workflows.**4 5Skills are instruction documents that guide how AI builds your projects. Enable skills to make AI follow your preferred patterns, best practices, and coding styles automatically.6 7---8 9## What Are Skills?10 11Skills are markdown documents that teach the AI how you want things done:12 13- **Workflow guides** - Step-by-step processes to follow14- **Best practices** - Coding standards and patterns15- **Domain knowledge** - Specific expertise (e.g., accessibility)16- **Preferences** - Your personal coding style17 18**Think of skills as:**19- Training manuals for the AI20- Automated best practices21- Consistency enforcers22- Knowledge you don't have to repeat23 24**Skills are NOT:**25- Project templates (see [Templates](?doc=templates))26- Executable code27- Data storage28- Replacement for good prompts29 30---31 32## How Skills Work33 34When you enable a skill, OSW Studio makes it **available** to the AI, but doesn't load the entire content into context automatically. Instead:35 361. **Metadata is revealed** - AI sees skill names, descriptions, and tags372. **Dynamic loading** - Skills are loaded into project context only when needed383. **Smart selection** - AI chooses to read a skill when it seems relevant to the task394. **User control** - You can explicitly ask AI to use a specific skill40 41**Example**: Enable the "Accessibility" skill:42- AI sees "Accessibility skill available - WCAG guidelines and best practices"43- When you ask to build a form, AI recognizes accessibility is relevant44- AI reads the full skill content and applies the guidance:45  - Add proper ARIA labels46  - Ensure keyboard navigation47  - Include alt text for images48  - Follow accessibility best practices49 50This approach keeps the AI's context clean while making expertise available when needed.51 52### Skill Evaluation (Optional)53 54By default, the AI decides on its own whether to read a skill — but it doesn't always get it right. In practice, skills can be ignored even when they're clearly relevant, because the instruction to check skills is buried in a large system prompt.55 56**Skill Evaluation** solves this with a pre-flight check: before the main AI call, a quick non-streaming call evaluates your prompt against enabled skills. If any match, an explicit "read this skill" directive is injected into your message so the AI treats it as a high-priority instruction rather than an easily overlooked system prompt note.57 58**To enable:**591. Go to **Skills** view602. Toggle **Skill Evaluation** on (below the global skills toggle)61 62**What changes:**63- Each message triggers an additional API call using your selected model64- Matched skills appear as explicit read directives in the AI's input65- A `skill_evaluation` event appears in the debug panel showing what was evaluated66 67**Trade-off:** This adds an extra API call per message, increasing initial token usage. It's disabled by default — enable it if you find skills aren't being picked up consistently.68 69---70 71## Built-in Skills72 73OSW Studio includes skills to get you started:74 75### Workflow76 77Teaches AI the recommended workflow for building in OSW Studio.78 79**What it does:**80- Plan before coding (PLAN.md)81- Build incrementally (main page first)82- Run `build` to verify compilation83- File structure and modularity guidance84 85**When to use**: Always - this is the foundation86 87### Responsive88 89Dedicated responsive design skill.90 91**What it does:**92- Mobile-first CSS with key breakpoints93- Navigation collapse patterns (hamburger menus)94- Fluid typography with `clamp()`95- Touch targets and common mobile failures96 97**When to use**: When building sites that need to work on mobile98 99### Frontend Design (12 sub-skills)100 101Visual design quality guidance with 12 distinct aesthetic directions: bold-geometric, soft-organic, editorial, minimal, brutalist, retro-futuristic, art-deco, maximalist, playful, industrial, luxury, and terminal.102 103**What it does:**104- Typography character and font pairing105- Color systems with CSS custom properties106- Spatial composition and motion intent107- Strong aesthetic commitment — each sub-skill pushes toward a distinct visual identity108 109**When to use**: When you want polished, professional-looking output with a specific aesthetic direction. Enable the whole group or individual sub-skills.110 111### Handlebars Advanced112 113Advanced Handlebars templating techniques.114 115**What it does:**116- Use Handlebars helpers117- Create reusable components118- Implement dynamic content119- Follow template best practices120 121**When to use**: When building Handlebars-based sites122 123### Accessibility124 125Web accessibility best practices (WCAG guidelines).126 127**What it does:**128- Add semantic HTML129- Include ARIA attributes130- Ensure keyboard navigation131- Provide alt text132- Use proper heading hierarchy133 134**When to use**: Always - accessibility should be standard135 136### Server Mode Skills137 138These skills guide the AI when working with a published deployment's backend:139 140- **Server** - Overview of Server Mode's backend features and `/.server/` context141- **Functions** - Edge functions (API endpoints) and server functions (helpers)142- **Database** - SQLite access from edge functions, schema design, migrations143- **Secrets** - Managing API keys and sensitive configuration144 145**When to use**: When a deployment is selected and you're building or extending backend features.146 147---148 149## Using Skills150 151### Enable a Skill152 1531. Click **Skills** in sidebar1542. Browse available skills1553. Click the toggle to enable a skill1564. Return to your project157 158The AI can now access this skill when it's relevant to your task. You can also explicitly ask the AI to use a specific skill (e.g., "Use the Accessibility skill to build this form").159 160### Disable a Skill161 1621. Go to **Skills** view1632. Find the enabled skill1643. Click the toggle to disable165 166The AI will no longer have access to that skill's content.167 168### Multiple Skills169 170Enable multiple skills at once. The AI can access any enabled skill when relevant to the task at hand.171 172**Recommendation**: Start with OSW Workflow + Accessibility as your baseline. The AI will intelligently choose which skills to reference based on what you're building.173 174---175 176## Creating Custom Skills177 178Teach AI your own preferred workflows and patterns.179 180### When to Create Skills181 182Create skills for:183- Company coding standards184- Personal workflow preferences185- Specific technologies you use186- Domain expertise (e.g., e-commerce patterns)187- Repeated instructions you give188 189### How to Create a Skill190 1911. **Write your skill**192   - Use markdown format193   - Be clear and specific194   - Include examples195   - Keep it focused on one topic196 1972. **Save as skill**198   - Go to **Skills** view and click **Create Skill**, or199   - Click the **+** button in the Skills panel header inside a workspace200   - Paste your content201   - Add metadata (name, description, tags)202   - Save — the skill is immediately available to the AI on the next message203 2043. **Use your skill**205   - Enable it like built-in skills206   - Test it on a project207   - Refine as needed208 209### Skill Writing Tips210 211**✅ Good skill content:**212 213Example of a well-written skill:214 215```216# Mobile-First Responsive Design217 218Always build mobile layouts first, then desktop.219 220## Process2211. Start with mobile viewport (375px)2222. Build layout that works on small screens2233. Add media queries for tablet (768px+)2244. Add media queries for desktop (1024px+)225 226## CSS Structure227- Use min-width media queries228- Avoid max-width229- Test on real devices230 231## Example CSS232/* Mobile first */233.container {234  padding: 1rem;235}236 237/* Tablet and up */238@media (min-width: 768px) {239  .container {240    padding: 2rem;241  }242}243```244 245**❌ Avoid:**246- Vague instructions ("make it good")247- Too many topics in one skill248- Contradictory guidance249- Overly long documents (keep under 2 pages)250 251---252 253## Managing Skills254 255### Browse Skills256 2571. Click **Skills** in sidebar2582. View built-in and custom skills2593. Read descriptions2604. Enable/disable as needed261 262### Edit Custom Skills263 2641. Find your skill in Skills view2652. Click **Edit**2663. Make changes2674. Save268 269Built-in skills can't be edited.270 271### Delete Custom Skills272 2731. Find skill in Skills view2742. Click **Delete** (trash icon)2753. Confirm deletion276 277Built-in skills can't be deleted.278 279---280 281## Skill Groups282 283Groups let you enable or disable a set of related skills with one toggle.284 285### Built-in Groups286 287- **Frontend Design** — All 12 aesthetic sub-skills. Disable to remove design direction guidance entirely.288- **Server Mode** — Server, Functions, Database, and Secrets skills. Disable when working on browser-only projects.289- **Web Standards** — Responsive and Accessibility. Keep enabled for production-quality output.290 291### How Groups Work292 293- Enabling a group activates all its member skills294- Disabling a group falls through to each skill's individual toggle295- A skill can belong to multiple groups — enabling any one of them makes the skill active296- Built-in group membership is fixed, but you can disable built-in groups297 298### Custom Groups299 300Create your own groups for project-specific workflows:301 3021. Go to **Skills** view → **Groups** tab3032. Click **New Group**3043. Name it, add an optional description, and select member skills3054. Toggle the group on/off as needed306 307Edit or delete custom groups any time.308 309---310 311## Importing & Exporting Skills312 313### Export a Skill314 315Share your skills with others or back them up:316 3171. Go to **Skills** view3182. Find your skill3193. Click **Export** (download icon)3204. Save the skill file (`.md`)321 322### Import a Skill323 324Use skills created by others:325 3261. Click **Skills** in sidebar3272. Click **Import Skill**3283. Select skill file3294. Skill appears in your library330 331Skills are compatible with Anthropic's SKILL.md convention, so you can use skills from other sources.332 333---334 335## Skill Tips336 337**💡 Start with built-in skills**338Learn how skills work before creating your own339 340**💡 One skill per topic**341Don't try to teach everything in one skill342 343**💡 Be specific**344Vague guidance leads to unpredictable results345 346**💡 Include examples**347Show the AI exactly what you want348 349**💡 Test and refine**350Create a skill, test it, improve it based on results351 352**💡 Don't over-skill**353Too many skills can confuse the AI. Start with 2-3 essential ones.354 355---356 357## Skills vs Templates358 359**Skills** = Instructions for AI360- Markdown documents361- Teach AI how to work362- Apply to any project363- Reusable across all projects364 365**Templates** = Project starting points366- Complete file structures367- HTML, CSS, JavaScript368- One-time use per project369 370Use skills to improve how AI works. Use templates to start projects faster.371 372**[Learn about Templates →](?doc=templates)**373 374---375 376## Common Use Cases377 378### Company Standards379 380Create a skill with your company's:381- Code formatting rules382- File naming conventions383- Comment standards384- Framework preferences385 386### Personal Workflow387 388Teach AI your preferences:389- CSS methodology (BEM, Tailwind, CSS-in-JS)390- JavaScript style (ES6+ features you prefer)391- HTML structure patterns392- Testing requirements393 394### Technology-Specific395 396Create skills for:397- React best practices398- Vue patterns399- Specific CSS frameworks400- Animation libraries401 402### Domain Expertise403 404Share knowledge about:405- E-commerce best practices406- Blog structures407- Portfolio patterns408- SaaS landing pages409 410---411 412## Common Questions413 414**Q: How many skills should I enable?**415A: Start with 2-3 core skills. Add more as needed. Too many can be overwhelming.416 417**Q: Can skills conflict?**418A: Yes. If two skills give opposite guidance, AI may get confused. Keep skills complementary.419 420**Q: Do skills slow down AI?**421A: Minimal impact. Only skill metadata is always present. Full skill content is loaded on-demand, so you only pay for tokens when the skill is actually used. If you enable Skill Evaluation, there's an additional API call per message for the pre-flight check.422 423**Q: Can I use Anthropic's SKILL.md files?**424A: Yes! OSW Studio is compatible with the SKILL.md convention.425 426**Q: Should every team member have the same skills?**427A: For consistency, yes. Export/import skills to share with your team.428 429---430 431**Next Steps:**432 433- **[Working with AI](?doc=working-with-ai)** - Get better results434- **[Templates](?doc=templates)** - Start projects faster435- **[Projects](?doc=projects)** - Manage your work436 437---438 439**Ready to create your first skill?** Think about instructions you repeat often, and turn them into a reusable skill!440