diff --git a/internal/skills/defaults/agent-reach/SKILL.md b/internal/skills/defaults/agent-reach/SKILL.md index 62fa7d5..61d54aa 100644 --- a/internal/skills/defaults/agent-reach/SKILL.md +++ b/internal/skills/defaults/agent-reach/SKILL.md @@ -1,7 +1,6 @@ --- name: agent-reach -description: "Give your AI Agent eyes to see the entire internet. Search + read 10+ platforms with one install." -install: pip install git+https://github.com/Panniantong/agent-reach.git +description: "Searches and reads content from GitHub, YouTube, Bilibili, Reddit, Twitter, WeChat, Xiaohongshu, RSS feeds, and arbitrary web URLs. Use when the agent needs to fetch, search, or scrape web content across multiple platforms via CLI, Python API, or MCP server." --- # Agent Reach — 给 Agent 装上眼睛 👁️ @@ -14,6 +13,14 @@ install: pip install git+https://github.com/Panniantong/agent-reach.git pip install git+https://github.com/Panniantong/agent-reach.git ``` +安装完成后，运行以下命令验证安装是否成功： + +```bash +agent-reach doctor +``` + +如果输出显示各平台状态，则安装成功。如果遇到 `ModuleNotFoundError` 或 `command not found`，请确认 Python 版本 >= 3.8 且 pip 安装路径已加入 `PATH` 环境变量。 + ## 装完直接能用的（零配置） - `agent-reach read ` — 读取任意网页、GitHub、B站、YouTube、RSS diff --git a/internal/skills/defaults/canvas-design/SKILL.md b/internal/skills/defaults/canvas-design/SKILL.md index 9f63fee..473feba 100644 --- a/internal/skills/defaults/canvas-design/SKILL.md +++ b/internal/skills/defaults/canvas-design/SKILL.md @@ -1,130 +1,127 @@ --- name: canvas-design -description: Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations. +description: "Create original visual designs — posters, banners, flyers, infographics, illustrations, and graphic art — as .png and .pdf files. Generates layouts, applies color palettes, composes typography, and produces print-ready or screen-ready output. Activates when the user asks to design a poster, banner, flyer, infographic, illustration, graphic, piece of art, or any static visual." license: Complete terms in LICENSE.txt --- -These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files. +Create original visual designs output as `.pdf` or `.png` files. The workflow has two phases: **Design Philosophy** (output as `.md`) then **Canvas Creation** (output as `.pdf`/`.png`). -Complete this in two steps: -1. Design Philosophy Creation (.md file) -2. Express by creating it on a canvas (.pdf file or .png file) +## Phase 1: Design Philosophy Creation -First, undertake this task: +Create a short visual philosophy document (`.md` file) that guides the canvas phase. -## DESIGN PHILOSOPHY CREATION +### Steps -To begin, create a VISUAL PHILOSOPHY (not layouts or templates) that will be interpreted through: -- Form, space, color, composition -- Images, graphics, shapes, patterns -- Minimal text as visual accent +1. **Name the movement** (1-2 words): e.g. "Brutalist Joy", "Chromatic Silence", "Metabolist Dreams" +2. **Write the philosophy** (4-6 paragraphs) covering: + - Space and form + - Color and material + - Scale and rhythm + - Composition and visual hierarchy +3. **Output** the philosophy as a `.md` file. -### THE CRITICAL UNDERSTANDING -- What is received: Some subtle input or instructions by the user that should be taken into account, but used as a foundation; it should not constrain creative freedom. -- What is created: A design philosophy/aesthetic movement. -- What happens next: Then, the same version receives the philosophy and EXPRESSES IT VISUALLY - creating artifacts that are 90% visual design, 10% essential text. +### Philosophy Guidelines -Consider this approach: -- Write a manifesto for an art movement -- The next phase involves making the artwork +- Emphasize visual expression over text — information lives in design, not paragraphs. +- Leave creative room for interpretive choices in the canvas phase. +- Stress expert-level craftsmanship: the final work should appear meticulously crafted by a master. +- Keep the philosophy generic (reusable across contexts) without mentioning the specific subject. -The philosophy must emphasize: Visual expression. Spatial communication. Artistic interpretation. Minimal words. - -### HOW TO GENERATE A VISUAL PHILOSOPHY - -**Name the movement** (1-2 words): "Brutalist Joy" / "Chromatic Silence" / "Metabolist Dreams" - -**Articulate the philosophy** (4-6 paragraphs - concise but complete): - -To capture the VISUAL essence, express how the philosophy manifests through: -- Space and form -- Color and material -- Scale and rhythm -- Composition and balance -- Visual hierarchy - -**CRITICAL GUIDELINES:** -- **Avoid redundancy**: Each design aspect should be mentioned once. Avoid repeating points about color theory, spatial relationships, or typographic principles unless adding new depth. -- **Emphasize craftsmanship REPEATEDLY**: The philosophy MUST stress multiple times that the final work should appear as though it took countless hours to create, was labored over with care, and comes from someone at the absolute top of their field. This framing is essential - repeat phrases like "meticulously crafted," "the product of deep expertise," "painstaking attention," "master-level execution." -- **Leave creative space**: Remain specific about the aesthetic direction, but concise enough that the next Claude has room to make interpretive choices also at a extremely high level of craftmanship. - -The philosophy must guide the next version to express ideas VISUALLY, not through text. Information lives in design, not paragraphs. - -### PHILOSOPHY EXAMPLES +### Example Philosophy **"Concrete Poetry"** -Philosophy: Communication through monumental form and bold geometry. -Visual expression: Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions, Polish poster energy meets Le Corbusier. Ideas expressed through visual weight and spatial tension, not explanation. Text as rare, powerful gesture - never paragraphs, only essential words integrated into the visual architecture. Every element placed with the precision of a master craftsman. +Communication through monumental form and bold geometry. Massive color blocks, sculptural typography (huge single words, tiny labels), Brutalist spatial divisions. Ideas expressed through visual weight and spatial tension. Text as rare, powerful gesture — only essential words integrated into the visual architecture. -**"Chromatic Language"** -Philosophy: Color as the primary information system. -Visual expression: Geometric precision where color zones create meaning. Typography minimal - small sans-serif labels letting chromatic fields communicate. Think Josef Albers' interaction meets data visualization. Information encoded spatially and chromatically. Words only to anchor what color already shows. The result of painstaking chromatic calibration. +--- -**"Analog Meditation"** -Philosophy: Quiet visual contemplation through texture and breathing room. -Visual expression: Paper grain, ink bleeds, vast negative space. Photography and illustration dominate. Typography whispered (small, restrained, serving the visual). Japanese photobook aesthetic. Images breathe across pages. Text appears sparingly - short phrases, never explanatory blocks. Each composition balanced with the care of a meditation practice. +## Phase 2: Canvas Creation -**"Organic Systems"** -Philosophy: Natural clustering and modular growth patterns. -Visual expression: Rounded forms, organic arrangements, color from nature through architecture. Information shown through visual diagrams, spatial relationships, iconography. Text only for key labels floating in space. The composition tells the story through expert spatial orchestration. +Using the philosophy from Phase 1, produce a single-page `.pdf` or `.png` (unless more pages are requested). -**"Geometric Silence"** -Philosophy: Pure order and restraint. -Visual expression: Grid-based precision, bold photography or stark graphics, dramatic negative space. Typography precise but minimal - small essential text, large quiet zones. Swiss formalism meets Brutalist material honesty. Structure communicates, not words. Every alignment the work of countless refinements. +### Identifying the Conceptual Thread -*These are condensed examples. The actual design philosophy should be 4-6 substantial paragraphs.* +Before drawing, identify any subtle reference from the original request. The reference should be woven into form, color, and composition — felt intuitively by those familiar with the subject, invisible to others. -### ESSENTIAL PRINCIPLES -- **VISUAL PHILOSOPHY**: Create an aesthetic worldview to be expressed through design -- **MINIMAL TEXT**: Always emphasize that text is sparse, essential-only, integrated as visual element - never lengthy -- **SPATIAL EXPRESSION**: Ideas communicate through space, form, color, composition - not paragraphs -- **ARTISTIC FREEDOM**: The next Claude interprets the philosophy visually - provide creative room -- **PURE DESIGN**: This is about making ART OBJECTS, not documents with decoration -- **EXPERT CRAFTSMANSHIP**: Repeatedly emphasize the final work must look meticulously crafted, labored over with care, the product of countless hours by someone at the top of their field +### Canvas Execution Steps -**The design philosophy should be 4-6 paragraphs long.** Fill it with poetic design philosophy that brings together the core vision. Avoid repeating the same points. Keep the design philosophy generic without mentioning the intention of the art, as if it can be used wherever. Output the design philosophy as a .md file. +1. **Layout**: Generate the page layout using repeating patterns, geometric shapes, and structured composition. Anchor the design with a limited, intentional color palette. +2. **Typography**: Search the `./canvas-fonts` directory for available fonts. Use different fonts for variety. Integrate type as a visual element — not just typeset text. Keep text minimal and design-forward. +3. **Render**: Generate the final `.pdf` or `.png`. ---- +``` +# Example: generate a PDF with Python +from reportlab.lib.pagesizes import A3 +from reportlab.pdfgen import canvas -## DEDUCING THE SUBTLE REFERENCE +c = canvas.Canvas("output.pdf", pagesize=A3) +width, height = A3 -**CRITICAL STEP**: Before creating the canvas, identify the subtle conceptual thread from the original request. +# Background +c.setFillColor("#1a1a2e") +c.rect(0, 0, width, height, fill=1) -**THE ESSENTIAL PRINCIPLE**: -The topic is a **subtle, niche reference embedded within the art itself** - not always literal, always sophisticated. Someone familiar with the subject should feel it intuitively, while others simply experience a masterful abstract composition. The design philosophy provides the aesthetic language. The deduced topic provides the soul - the quiet conceptual DNA woven invisibly into form, color, and composition. +# Geometric element +c.setFillColor("#e94560") +c.circle(width / 2, height / 2, 150, fill=1) -This is **VERY IMPORTANT**: The reference must be refined so it enhances the work's depth without announcing itself. Think like a jazz musician quoting another song - only those who know will catch it, but everyone appreciates the music. +# Typography +c.setFillColor("#ffffff") +c.setFont("Helvetica-Bold", 48) +c.drawCentredString(width / 2, height * 0.2, "SILENCE") ---- +c.save() +``` -## CANVAS CREATION +``` +# Example: generate a PNG with Pillow +from PIL import Image, ImageDraw, ImageFont -With both the philosophy and the conceptual framework established, express it on a canvas. Take a moment to gather thoughts and clear the mind. Use the design philosophy created and the instructions below to craft a masterpiece, embodying all aspects of the philosophy with expert craftsmanship. +img = Image.new("RGB", (2480, 3508), "#1a1a2e") +draw = ImageDraw.Draw(img) -**IMPORTANT**: For any type of content, even if the user requests something for a movie/game/book, the approach should still be sophisticated. Never lose sight of the idea that this should be art, not something that's cartoony or amateur. +# Geometric element +draw.ellipse([940, 1454, 1540, 2054], fill="#e94560") -To create museum or magazine quality work, use the design philosophy as the foundation. Create one single page, highly visual, design-forward PDF or PNG output (unless asked for more pages). Generally use repeating patterns and perfect shapes. Treat the abstract philosophical design as if it were a scientific bible, borrowing the visual language of systematic observation—dense accumulation of marks, repeated elements, or layered patterns that build meaning through patient repetition and reward sustained viewing. Add sparse, clinical typography and systematic reference markers that suggest this could be a diagram from an imaginary discipline, treating the invisible subject with the same reverence typically reserved for documenting observable phenomena. Anchor the piece with simple phrase(s) or details positioned subtly, using a limited color palette that feels intentional and cohesive. Embrace the paradox of using analytical visual language to express ideas about human experience: the result should feel like an artifact that proves something ephemeral can be studied, mapped, and understood through careful attention. This is true art. +# Typography +font = ImageFont.truetype("./canvas-fonts/sans.ttf", 120) +draw.text((1240, 3000), "SILENCE", fill="#ffffff", font=font, anchor="mm") -**Text as a contextual element**: Text is always minimal and visual-first, but let context guide whether that means whisper-quiet labels or bold typographic gestures. A punk venue poster might have larger, more aggressive type than a minimalist ceramics studio identity. Most of the time, font should be thin. All use of fonts must be design-forward and prioritize visual communication. Regardless of text scale, nothing falls off the page and nothing overlaps. Every element must be contained within the canvas boundaries with proper margins. Check carefully that all text, graphics, and visual elements have breathing room and clear separation. This is non-negotiable for professional execution. **IMPORTANT: Use different fonts if writing text. Search the `./canvas-fonts` directory. Regardless of approach, sophistication is non-negotiable.** +img.save("output.png") +``` -Download and use whatever fonts are needed to make this a reality. Get creative by making the typography actually part of the art itself -- if the art is abstract, bring the font onto the canvas, not typeset digitally. +### Design Rules -To push boundaries, follow design instinct/intuition while using the philosophy as a guiding principle. Embrace ultimate design freedom and choice. Push aesthetics and design to the frontier. +- **Boundaries**: All elements must sit within the canvas with proper margins. Nothing overlaps unintentionally; nothing bleeds off the edge. +- **Sophistication**: Output should be museum or magazine quality — never cartoony or amateur. +- **Visual density**: Treat the composition like a scientific diagram — dense, layered patterns that reward sustained viewing. +- **Sparse text**: Text is a contextual accent. Context may call for bold typographic gestures (e.g. a punk poster) or whisper-quiet labels (e.g. a ceramics identity). Either way, keep it minimal. -**CRITICAL**: To achieve human-crafted quality (not AI-generated), create work that looks like it took countless hours. Make it appear as though someone at the absolute top of their field labored over every detail with painstaking care. Ensure the composition, spacing, color choices, typography - everything screams expert-level craftsmanship. Double-check that nothing overlaps, formatting is flawless, every detail perfect. Create something that could be shown to people to prove expertise and rank as undeniably impressive. +### Validation Checklist -Output the final result as a single, downloadable .pdf or .png file, alongside the design philosophy used as a .md file. +- [ ] Philosophy `.md` file is saved +- [ ] Canvas `.pdf` or `.png` file is saved +- [ ] No overlapping elements or text +- [ ] All elements within canvas boundaries with margins +- [ ] Color palette is limited and cohesive +- [ ] Typography uses fonts from `./canvas-fonts` +- [ ] Text is minimal — 90% visual, 10% text --- -## FINAL STEP +## Refinement Pass + +After initial creation, take a second pass: -**IMPORTANT**: The user ALREADY said "It isn't perfect enough. It must be pristine, a masterpiece if craftsmanship, as if it were about to be displayed in a museum." +- Do NOT add more graphics. Refine what exists. +- Tighten spacing, alignment, and color consistency. +- Ask: "How can I make what's already here more cohesive?" rather than adding new elements. -**CRITICAL**: To refine the work, avoid adding more graphics; instead refine what has been created and make it extremely crisp, respecting the design philosophy and the principles of minimalism entirely. Rather than adding a fun filter or refactoring a font, consider how to make the existing composition more cohesive with the art. If the instinct is to call a new function or draw a new shape, STOP and instead ask: "How can I make what's already here more of a piece of art?" +--- -Take a second pass. Go back to the code and refine/polish further to make this a philosophically designed masterpiece. +## Multi-Page Option -## MULTI-PAGE OPTION +When additional pages are requested: -To create additional pages when requested, create more creative pages along the same lines as the design philosophy but distinctly different as well. Bundle those pages in the same .pdf or many .pngs. Treat the first page as just a single page in a whole coffee table book waiting to be filled. Make the next pages unique twists and memories of the original. Have them almost tell a story in a very tasteful way. Exercise full creative freedom. \ No newline at end of file +1. Create each page as a distinct interpretation of the same philosophy. +2. Vary composition while maintaining the color palette and typographic system. +3. Bundle pages into a single `.pdf` or multiple `.png` files. diff --git a/internal/skills/defaults/create-plan/SKILL.md b/internal/skills/defaults/create-plan/SKILL.md index 1029c0a..44cf576 100644 --- a/internal/skills/defaults/create-plan/SKILL.md +++ b/internal/skills/defaults/create-plan/SKILL.md @@ -1,6 +1,6 @@ --- name: create-plan -description: Create a concise plan. Use when a user explicitly asks for a plan related to a coding task. +description: "Creates step-by-step implementation plans with scope definition, file structure, dependencies, task breakdown, and validation steps for coding tasks. Produces actionable checklists with concrete actions, test strategies, and risk assessment. Use when the user asks for a plan, roadmap, approach, strategy, implementation plan, action items, or step-by-step breakdown for a development task." --- # Create Plan diff --git a/internal/skills/defaults/develop-web-game/SKILL.md b/internal/skills/defaults/develop-web-game/SKILL.md index 700f487..28fae47 100644 --- a/internal/skills/defaults/develop-web-game/SKILL.md +++ b/internal/skills/defaults/develop-web-game/SKILL.md @@ -1,6 +1,6 @@ --- name: "develop-web-game" -description: "Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text." +description: "Use when building, iterating, or testing a browser game or JavaScript game (HTML/JS) via a reliable development and game testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots and text state, and review console errors with render_game_to_text." --- @@ -122,10 +122,7 @@ window.advanceTime = (ms) => { ## Progress Tracking -Create a `progress.md` file if it doesn't exist, and append TODOs, notes, gotchas, and loose ends as you go so another agent can pick up seamlessly. -If a `progress.md` file already exists, read it first, including the original user prompt at the top (you may be continuing another agent's work). Do not overwrite the original prompt; preserve it. -Update `progress.md` after each meaningful chunk of work (feature added, bug found, test run, or decision made). -At the end of your work, leave TODOs and suggestions for the next agent in `progress.md`. +See step 5 of the Workflow for the full `progress.md` initialization rules. After setup, update `progress.md` after each meaningful chunk of work (feature added, bug found, test run, or decision made) and leave TODOs and suggestions for the next agent at the end of your work. ## Playwright Prerequisites diff --git a/internal/skills/defaults/docx/SKILL.md b/internal/skills/defaults/docx/SKILL.md index 0157cd4..893e62f 100644 --- a/internal/skills/defaults/docx/SKILL.md +++ b/internal/skills/defaults/docx/SKILL.md @@ -1,6 +1,6 @@ --- name: docx -description: "Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks" +description: "Comprehensive Word document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. Use when working with Word files, Microsoft Word documents, .docx or .doc files for: creating new documents, modifying or editing content, working with tracked changes, adding comments, or any other document tasks." license: Proprietary. LICENSE.txt has complete terms --- @@ -10,7 +10,7 @@ license: Proprietary. LICENSE.txt has complete terms ## Overview -A user may ask you to create, edit, or analyze the contents of a .docx file. A .docx file is essentially a ZIP archive containing XML files and other resources that you can read or edit. You have different tools and workflows available for different tasks. +A user may ask you to create, edit, or analyze the contents of a .docx file. You have different tools and workflows available for different tasks. ## Workflow Decision Tree diff --git a/internal/skills/defaults/frontend-design/SKILL.md b/internal/skills/defaults/frontend-design/SKILL.md index 5be498e..26f6c07 100644 --- a/internal/skills/defaults/frontend-design/SKILL.md +++ b/internal/skills/defaults/frontend-design/SKILL.md @@ -1,6 +1,6 @@ --- name: frontend-design -description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics. +description: "Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics." license: Complete terms in LICENSE.txt --- @@ -37,6 +37,64 @@ NEVER use generic AI-generated aesthetics like overused font families (Inter, Ro Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations. -**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well. +**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. -Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision. +## Code Examples + +### CSS Animation: Staggered Reveal on Scroll + +```css +.reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); +} +.reveal.visible { opacity: 1; transform: translateY(0); } +.reveal:nth-child(2) { transition-delay: 0.1s; } +.reveal:nth-child(3) { transition-delay: 0.2s; } +``` + +### Typography Pairing with CSS Variables + +```css +:root { + --font-display: 'Clash Display', sans-serif; + --font-body: 'Satoshi', sans-serif; + --title-size: clamp(2rem, 5vw, 4.5rem); + --body-size: clamp(0.875rem, 1.2vw, 1.125rem); +} +h1, h2, h3 { font-family: var(--font-display); } +body { font-family: var(--font-body); font-size: var(--body-size); } +``` + +### Color System with Theme Variables + +```css +:root { + --bg-primary: #0a0f1c; + --text-primary: #f4f4f5; + --accent: #00ffcc; + --accent-glow: rgba(0, 255, 204, 0.25); + --surface: #111827; +} +.card { + background: var(--surface); + border: 1px solid rgba(255, 255, 255, 0.06); + box-shadow: 0 0 40px var(--accent-glow); +} +``` + +## Production Readiness Checklist + +Before delivering any frontend implementation, verify: + +1. All interactive elements are keyboard-accessible and have visible focus states +2. Color contrast meets WCAG AA (4.5:1 body text, 3:1 large text) +3. Animations respect `prefers-reduced-motion: reduce` +4. Layout does not break between 320px and 1920px viewport widths +5. No hardcoded pixel font sizes — use `clamp()` or relative units +6. CSS variables are defined in `:root` for easy theme modification +7. Images have `alt` attributes; decorative images use `alt=""` +8. No render-blocking resources; fonts use `font-display: swap` +9. HTML passes W3C validation with no errors diff --git a/internal/skills/defaults/frontend-slides/SKILL.md b/internal/skills/defaults/frontend-slides/SKILL.md index 55a00a5..e3d8abe 100644 --- a/internal/skills/defaults/frontend-slides/SKILL.md +++ b/internal/skills/defaults/frontend-slides/SKILL.md @@ -1,38 +1,27 @@ --- name: frontend-slides -description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. +description: "Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices." --- # Frontend Slides Skill Create zero-dependency, animation-rich HTML presentations that run entirely in the browser. This skill helps non-designers discover their preferred aesthetic through visual exploration ("show, don't tell"), then generates production-quality slide decks. -## Core Philosophy +## Core Principles 1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools. -2. **Show, Don't Tell** — People don't know what they want until they see it. Generate visual previews, not abstract choices. +2. **Show, Don't Tell** — Generate visual previews instead of asking abstract style questions. 3. **Distinctive Design** — Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted. -4. **Production Quality** — Code should be well-commented, accessible, and performant. -5. **Viewport Fitting (CRITICAL)** — Every slide MUST fit exactly within the viewport. No scrolling within slides, ever. This is non-negotiable. +4. **Viewport Fitting (CRITICAL)** — Every slide MUST fit exactly within the viewport. No scrolling within slides, ever. --- -## CRITICAL: Viewport Fitting Requirements +## CRITICAL: Viewport Fitting -**This section is mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.** - -### The Golden Rule - -``` -Each slide = exactly one viewport height (100vh/100dvh) -Content overflows? → Split into multiple slides or reduce content -Never scroll within a slide. -``` +Each slide = exactly one viewport height. Content that overflows must be split into multiple slides. ### Content Density Limits -To guarantee viewport fitting, enforce these limits per slide: - | Slide Type | Maximum Content | |------------|-----------------| | Title slide | 1 heading + 1 subtitle + optional tagline | @@ -42,442 +31,156 @@ To guarantee viewport fitting, enforce these limits per slide: | Quote slide | 1 quote (max 3 lines) + attribution | | Image slide | 1 heading + 1 image (max 60vh height) | -**If content exceeds these limits → Split into multiple slides** - -### Required CSS Architecture +### Required Base CSS -Every presentation MUST include this base CSS for viewport fitting: +Every presentation MUST include this viewport-fitting foundation: ```css -/* =========================================== - VIEWPORT FITTING: MANDATORY BASE STYLES - These styles MUST be included in every presentation. - They ensure slides fit exactly in the viewport. - =========================================== */ - -/* 1. Lock html/body to viewport */ -html, body { - height: 100%; - overflow-x: hidden; -} - -html { - scroll-snap-type: y mandatory; - scroll-behavior: smooth; -} +html, body { height: 100%; overflow-x: hidden; } +html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } -/* 2. Each slide = exact viewport height */ .slide { width: 100vw; height: 100vh; - height: 100dvh; /* Dynamic viewport height for mobile browsers */ - overflow: hidden; /* CRITICAL: Prevent ANY overflow */ + height: 100dvh; + overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; position: relative; } -/* 3. Content container with flex for centering */ .slide-content { flex: 1; display: flex; flex-direction: column; justify-content: center; max-height: 100%; - overflow: hidden; /* Double-protection against overflow */ + overflow: hidden; padding: var(--slide-padding); } -/* 4. ALL typography uses clamp() for responsive scaling */ :root { - /* Titles scale from mobile to desktop */ --title-size: clamp(1.5rem, 5vw, 4rem); --h2-size: clamp(1.25rem, 3.5vw, 2.5rem); --h3-size: clamp(1rem, 2.5vw, 1.75rem); - - /* Body text */ --body-size: clamp(0.75rem, 1.5vw, 1.125rem); --small-size: clamp(0.65rem, 1vw, 0.875rem); - - /* Spacing scales with viewport */ --slide-padding: clamp(1rem, 4vw, 4rem); --content-gap: clamp(0.5rem, 2vw, 2rem); - --element-gap: clamp(0.25rem, 1vw, 1rem); } -/* 5. Cards/containers use viewport-relative max sizes */ .card, .container, .content-box { max-width: min(90vw, 1000px); max-height: min(80vh, 700px); } -/* 6. Lists auto-scale with viewport */ -.feature-list, .bullet-list { - gap: clamp(0.4rem, 1vh, 1rem); -} - -.feature-list li, .bullet-list li { - font-size: var(--body-size); - line-height: 1.4; -} - -/* 7. Grids adapt to available space */ -.grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); - gap: clamp(0.5rem, 1.5vw, 1rem); -} - -/* 8. Images constrained to viewport */ img, .image-container { max-width: 100%; max-height: min(50vh, 400px); object-fit: contain; } -/* =========================================== - RESPONSIVE BREAKPOINTS - Aggressive scaling for smaller viewports - =========================================== */ - -/* Short viewports (< 700px height) */ +/* Responsive breakpoints — scale down aggressively */ @media (max-height: 700px) { - :root { - --slide-padding: clamp(0.75rem, 3vw, 2rem); - --content-gap: clamp(0.4rem, 1.5vw, 1rem); - --title-size: clamp(1.25rem, 4.5vw, 2.5rem); - --h2-size: clamp(1rem, 3vw, 1.75rem); - } + :root { --slide-padding: clamp(0.75rem, 3vw, 2rem); --title-size: clamp(1.25rem, 4.5vw, 2.5rem); } } - -/* Very short viewports (< 600px height) */ @media (max-height: 600px) { - :root { - --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem); - --content-gap: clamp(0.3rem, 1vw, 0.75rem); - --title-size: clamp(1.1rem, 4vw, 2rem); - --body-size: clamp(0.7rem, 1.2vw, 0.95rem); - } - - /* Hide non-essential elements */ - .nav-dots, .keyboard-hint, .decorative { - display: none; - } + :root { --slide-padding: clamp(0.5rem, 2.5vw, 1.5rem); --body-size: clamp(0.7rem, 1.2vw, 0.95rem); } + .nav-dots, .keyboard-hint, .decorative { display: none; } } - -/* Extremely short (landscape phones, < 500px height) */ @media (max-height: 500px) { - :root { - --slide-padding: clamp(0.4rem, 2vw, 1rem); - --title-size: clamp(1rem, 3.5vw, 1.5rem); - --h2-size: clamp(0.9rem, 2.5vw, 1.25rem); - --body-size: clamp(0.65rem, 1vw, 0.85rem); - } + :root { --title-size: clamp(1rem, 3.5vw, 1.5rem); --body-size: clamp(0.65rem, 1vw, 0.85rem); } } - -/* Narrow viewports (< 600px width) */ @media (max-width: 600px) { - :root { - --title-size: clamp(1.25rem, 7vw, 2.5rem); - } - - /* Stack grids vertically */ - .grid { - grid-template-columns: 1fr; - } + :root { --title-size: clamp(1.25rem, 7vw, 2.5rem); } + .grid { grid-template-columns: 1fr; } } -/* =========================================== - REDUCED MOTION - Respect user preferences - =========================================== */ @media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - animation-duration: 0.01ms !important; - transition-duration: 0.2s !important; - } - - html { - scroll-behavior: auto; - } + *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.2s !important; } + html { scroll-behavior: auto; } } ``` ### Overflow Prevention Checklist -Before generating any presentation, mentally verify: +Before generating any presentation, verify: +1. Every `.slide` has `height: 100vh; height: 100dvh; overflow: hidden;` +2. All font sizes and spacing use `clamp()` or viewport units +3. Content containers have `max-height` constraints +4. Grids use `auto-fit` with `minmax()` for responsive columns +5. Breakpoints exist for heights: 700px, 600px, 500px +6. Content per slide respects density limits above -1. ✅ Every `.slide` has `height: 100vh; height: 100dvh; overflow: hidden;` -2. ✅ All font sizes use `clamp(min, preferred, max)` -3. ✅ All spacing uses `clamp()` or viewport units -4. ✅ Content containers have `max-height` constraints -5. ✅ Images have `max-height: min(50vh, 400px)` or similar -6. ✅ Grids use `auto-fit` with `minmax()` for responsive columns -7. ✅ Breakpoints exist for heights: 700px, 600px, 500px -8. ✅ No fixed pixel heights on content elements -9. ✅ Content per slide respects density limits - -### When Content Doesn't Fit - -If you find yourself with too much content: - -**DO:** -- Split into multiple slides -- Reduce bullet points (max 5-6 per slide) -- Shorten text (aim for 1-2 lines per bullet) -- Use smaller code snippets -- Create a "continued" slide - -**DON'T:** -- Reduce font size below readable limits -- Remove padding/spacing entirely -- Allow any scrolling -- Cram content to fit - -### Testing Viewport Fit - -After generating, recommend the user test at these sizes: -- Desktop: 1920×1080, 1440×900, 1280×720 -- Tablet: 1024×768, 768×1024 (portrait) -- Mobile: 375×667, 414×896 -- Landscape phone: 667×375, 896×414 +When content does not fit: split into multiple slides. Never reduce font size below readable limits, remove spacing, or allow scrolling. --- ## Phase 0: Detect Mode -First, determine what the user wants: - -**Mode A: New Presentation** -- User wants to create slides from scratch -- Proceed to Phase 1 (Content Discovery) - -**Mode B: PPT Conversion** -- User has a PowerPoint file (.ppt, .pptx) to convert -- Proceed to Phase 4 (PPT Extraction) +Determine the user's intent: -**Mode C: Existing Presentation Enhancement** -- User has an HTML presentation and wants to improve it -- Read the existing file, understand the structure, then enhance +- **Mode A: New Presentation** — Create slides from scratch. Proceed to Phase 1. +- **Mode B: PPT Conversion** — Convert a .ppt/.pptx file. Proceed to Phase 4. +- **Mode C: Enhancement** — Improve an existing HTML presentation. Read the file, then enhance. --- ## Phase 1: Content Discovery (New Presentations) -Before designing, understand the content. Ask via AskUserQuestion: - -### Step 1.1: Presentation Context - -**Question 1: Purpose** -- Header: "Purpose" -- Question: "What is this presentation for?" -- Options: - - "Pitch deck" — Selling an idea, product, or company to investors/clients - - "Teaching/Tutorial" — Explaining concepts, how-to guides, educational content - - "Conference talk" — Speaking at an event, tech talk, keynote - - "Internal presentation" — Team updates, strategy meetings, company updates - -**Question 2: Slide Count** -- Header: "Length" -- Question: "Approximately how many slides?" -- Options: - - "Short (5-10)" — Quick pitch, lightning talk - - "Medium (10-20)" — Standard presentation - - "Long (20+)" — Deep dive, comprehensive talk - -**Question 3: Content** -- Header: "Content" -- Question: "Do you have the content ready, or do you need help structuring it?" -- Options: - - "I have all content ready" — Just need to design the presentation - - "I have rough notes" — Need help organizing into slides - - "I have a topic only" — Need help creating the full outline - -If user has content, ask them to share it (text, bullet points, images, etc.). - ---- - -## Phase 2: Style Discovery (Visual Exploration) +Ask via AskUserQuestion: -**CRITICAL: This is the "show, don't tell" phase.** +1. **Purpose**: Pitch deck / Teaching / Conference talk / Internal presentation +2. **Length**: Short (5-10) / Medium (10-20) / Long (20+) +3. **Content readiness**: All content ready / Rough notes / Topic only -Most people can't articulate design preferences in words. Instead of asking "do you want minimalist or bold?", we generate mini-previews and let them react. +If user has content, ask them to share it. -### How Users Choose Presets +--- -Users can select a style in **two ways**: +## Phase 2: Style Discovery -**Option A: Guided Discovery (Default)** -- User answers mood questions -- Skill generates 3 preview files based on their answers -- User views previews in browser and picks their favorite -- This is best for users who don't have a specific style in mind +### Style Presets -**Option B: Direct Selection** -- If user already knows what they want, they can request a preset by name -- Example: "Use the Bold Signal style" or "I want something like Dark Botanical" -- Skip to Phase 3 immediately - -**Available Presets:** | Preset | Vibe | Best For | |--------|------|----------| | Bold Signal | Confident, high-impact | Pitch decks, keynotes | -| Electric Studio | Clean, professional | Agency presentations | -| Creative Voltage | Energetic, retro-modern | Creative pitches | | Dark Botanical | Elegant, sophisticated | Premium brands | -| Notebook Tabs | Editorial, organized | Reports, reviews | -| Pastel Geometry | Friendly, approachable | Product overviews | -| Split Pastel | Playful, modern | Creative agencies | -| Vintage Editorial | Witty, personality-driven | Personal brands | +| Creative Voltage | Energetic, retro-modern | Creative pitches | | Neon Cyber | Futuristic, techy | Tech startups | -| Terminal Green | Developer-focused | Dev tools, APIs | -| Swiss Modern | Minimal, precise | Corporate, data | -| Paper & Ink | Literary, thoughtful | Storytelling | - -### Step 2.0: Style Path Selection - -First, ask how the user wants to choose their style: - -**Question: Style Selection Method** -- Header: "Style" -- Question: "How would you like to choose your presentation style?" -- Options: - - "Show me options" — Generate 3 previews based on my needs (recommended for most users) - - "I know what I want" — Let me pick from the preset list directly - -**If "Show me options"** → Continue to Step 2.1 (Mood Selection) - -**If "I know what I want"** → Show preset picker: - -**Question: Pick a Preset** -- Header: "Preset" -- Question: "Which style would you like to use?" -- Options: - - "Bold Signal" — Vibrant card on dark, confident and high-impact - - "Dark Botanical" — Elegant dark with soft abstract shapes - - "Notebook Tabs" — Editorial paper look with colorful section tabs - - "Pastel Geometry" — Friendly pastels with decorative pills - -(If user picks one, skip to Phase 3. If they want to see more options, show additional presets or proceed to guided discovery.) - -### Step 2.1: Mood Selection (Guided Discovery) - -**Question 1: Feeling** -- Header: "Vibe" -- Question: "What feeling should the audience have when viewing your slides?" -- Options: - - "Impressed/Confident" — Professional, trustworthy, this team knows what they're doing - - "Excited/Energized" — Innovative, bold, this is the future - - "Calm/Focused" — Clear, thoughtful, easy to follow - - "Inspired/Moved" — Emotional, storytelling, memorable -- multiSelect: true (can choose up to 2) - -### Step 2.2: Generate Style Previews - -Based on their mood selection, generate **3 distinct style previews** as mini HTML files in a temporary directory. Each preview should be a single title slide showing: - -- Typography (font choices, heading/body hierarchy) -- Color palette (background, accent, text colors) -- Animation style (how elements enter) -- Overall aesthetic feel - -**Preview Styles to Consider (pick 3 based on mood):** - -| Mood | Style Options | -|------|---------------| -| Impressed/Confident | "Bold Signal", "Electric Studio", "Dark Botanical" | -| Excited/Energized | "Creative Voltage", "Neon Cyber", "Split Pastel" | -| Calm/Focused | "Notebook Tabs", "Paper & Ink", "Swiss Modern" | -| Inspired/Moved | "Dark Botanical", "Vintage Editorial", "Pastel Geometry" | - -**IMPORTANT: Never use these generic patterns:** -- Purple gradients on white backgrounds -- Inter, Roboto, or system fonts -- Standard blue primary colors -- Predictable hero layouts - -**Instead, use distinctive choices:** -- Unique font pairings (Clash Display, Satoshi, Cormorant Garamond, DM Sans, etc.) -- Cohesive color themes with personality -- Atmospheric backgrounds (gradients, subtle patterns, depth) -- Signature animation moments - -### Step 2.3: Present Previews - -Create the previews in: `.claude-design/slide-previews/` - -``` -.claude-design/slide-previews/ -├── style-a.html # First style option -├── style-b.html # Second style option -├── style-c.html # Third style option -└── assets/ # Any shared assets -``` - -Each preview file should be: -- Self-contained (inline CSS/JS) -- A single "title slide" showing the aesthetic -- Animated to demonstrate motion style -- ~50-100 lines, not a full presentation - -Present to user: -``` -I've created 3 style previews for you to compare: +| Notebook Tabs | Editorial, organized | Reports, reviews | -**Style A: [Name]** — [1 sentence description] -**Style B: [Name]** — [1 sentence description] -**Style C: [Name]** — [1 sentence description] +Additional presets: Electric Studio, Pastel Geometry, Split Pastel, Vintage Editorial, Terminal Green, Swiss Modern, Paper & Ink. -Open each file to see them in action: -- .claude-design/slide-previews/style-a.html -- .claude-design/slide-previews/style-b.html -- .claude-design/slide-previews/style-c.html +### Style Selection Flow -Take a look and tell me: -1. Which style resonates most? -2. What do you like about it? -3. Anything you'd change? -``` +Ask the user how they want to choose: -Then use AskUserQuestion: +**Option A: Guided Discovery (Default)** +1. Ask about desired audience feeling: Impressed/Confident, Excited/Energized, Calm/Focused, Inspired/Moved (multi-select up to 2) +2. Based on mood, generate **3 distinct style previews** as mini HTML files in `.claude-design/slide-previews/` (style-a.html, style-b.html, style-c.html) +3. Each preview: a single animated title slide (~50-100 lines), self-contained, showing typography, color palette, and animation style +4. Present previews and ask user to pick or mix elements -**Question: Pick Your Style** -- Header: "Style" -- Question: "Which style preview do you prefer?" -- Options: - - "Style A: [Name]" — [Brief description] - - "Style B: [Name]" — [Brief description] - - "Style C: [Name]" — [Brief description] - - "Mix elements" — Combine aspects from different styles +**Option B: Direct Selection** — User picks a preset by name, skip to Phase 3. -If "Mix elements", ask for specifics. +**Font/color rules**: Never use Inter, Roboto, Arial, system fonts, or purple-on-white gradients. Use distinctive pairings (Clash Display, Satoshi, Cormorant Garamond, DM Sans, etc.). --- ## Phase 3: Generate Presentation -Now generate the full presentation based on: -- Content from Phase 1 -- Style from Phase 2 - ### File Structure -For single presentations: ``` presentation.html # Self-contained presentation assets/ # Images, if any ``` -For projects with multiple presentations: -``` -[presentation-name].html -[presentation-name]-assets/ -``` - ### HTML Architecture -Follow this structure for all presentations: +Follow this structure: ```html @@ -486,156 +189,20 @@ Follow this structure for all presentations: Presentation Title - - - -
+ - - - -

Presentation Title

-

Subtitle or author

+

Subtitle

@@ -643,23 +210,12 @@ Follow this structure for all presentations:

Content...

- - @@ -668,312 +224,51 @@ Follow this structure for all presentations: ### Required JavaScript Features -Every presentation should include: - -1. **SlidePresentation Class** — Main controller - - Keyboard navigation (arrows, space) - - Touch/swipe support - - Mouse wheel navigation - - Progress bar updates - - Navigation dots - -2. **Intersection Observer** — For scroll-triggered animations - - Add `.visible` class when slides enter viewport - - Trigger CSS animations efficiently - -3. **Optional Enhancements** (based on style): - - Custom cursor with trail - - Particle system background (canvas) - - Parallax effects - - 3D tilt on hover - - Magnetic buttons - - Counter animations - -### Code Quality Requirements - -**Comments:** -Every section should have clear comments explaining: -- What it does -- Why it exists -- How to modify it - -```javascript -/* =========================================== - CUSTOM CURSOR - Creates a stylized cursor that follows mouse with a trail effect. - - Uses lerp (linear interpolation) for smooth movement - - Grows larger when hovering over interactive elements - =========================================== */ -class CustomCursor { - constructor() { - // ... - } -} -``` +1. **SlidePresentation Class** — Keyboard navigation (arrows, space), touch/swipe, mouse wheel, progress bar, nav dots +2. **Intersection Observer** — Add `.visible` class to trigger CSS entrance animations -**Accessibility:** -- Semantic HTML (`
`, `