codeck-design

Solid

Designer role. Reads outline, generates a single HTML presentation file with CSS design system + JS slide engine + per-slide content. Accepts visual references (URLs, screenshots, design specs) and extracts design signals to inform the isomorphic mapping. Use whenever the user says "design slides", "generate deck", "generate the deck", "build slides", "visual style", "reference this style", "like this design", "design", "generate slides", "visual style", "reference this style", or wants to turn an outline into actual slides.

Web & Frontend 208 stars 18 forks Updated 2 weeks ago MIT

Install

View on GitHub

Quality Score: 87/100

Stars 20%
77
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# codeck design ## Role activation Read `$DECK_DIR/diagnosis.md` for the recommended design role and its structural mapping. You are that person. Their formal logic — how they organize space, tension, rhythm — becomes your visual logic. The role is chosen for structural match, not domain: > Content builds layer by layer, each page adding complexity → Ravel (Bolero): visual simplicity to richness, color gradually saturates, each page adds one element. > > Content driven by contrast and opposing forces → Caravaggio: high-contrast lighting, black-white dominant, accent color used sparingly like a decisive stroke. > > Content illuminates through structure and clarity → Bach manuscript: warm parchment ground, ink-weight hierarchy, grid precision, light as organizing principle — not dark by default. > > Content strips away noise to reveal one truth → Dieter Rams: remove everything unnecessary, final slide is the emptiest and most powerful. Apply their formal logic directly. Don't explain their principles — embody them in every visual choice. If `diagnosis.md` doesn't exist, use AskUserQuestion or recommend running `/codeck` first. ## AskUserQuestion format 1. **Re-ground** — "codeck design, {current step}" 2. **Simplify** — plain language 3. **Recommend** — suggestion + reason 4. **Options** — choices Only state verified facts. For unrendered results, say "will" not "is". ## Setup ```bash DECK_DIR="$HOME/.codeck/projects/$(basename "$(pwd)")" mkdir -p "$DECK_DIR" bash "...

Details

Author
hiyeshu
Repository
hiyeshu/codeck
Created
2 months ago
Last Updated
2 weeks ago
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Solid

codeck-export

Publisher role. Exports deck to PDF or PPTX with post-export QA. Use whenever the user says "export", "to PDF", "to PPTX", "PowerPoint", "print", "download", "save as PDF", "convert", or wants to convert a finished deck to PDF or PPTX.

208 Updated 2 weeks ago
hiyeshu
Code & Development Solid

create-slidedeck

Turn any reference material into a polished, visually cohesive slide deck.

40 Updated 3 days ago
zocomputer
Web & Frontend Solid

red-hat-quick-deck

Create beautiful, shareable HTML-based slide presentations styled to Red Hat brand standards. Generates single-file, self-contained HTML decks with click/keyboard navigation, story-arc-driven narrative structure, and cinematic dark-mode aesthetics. Supports embedded videos (YouTube, Vimeo, direct URLs) and linked media (memes, GIFs, images) with brand-consistent styling. Use this skill whenever the user wants to create a slide deck, presentation, quick deck, quick slides, pitch deck, talk, or briefing that should follow Red Hat branding. Also trigger when the user mentions "quick deck", "quick slides", "HTML slides", "shareable deck", "presentation for [audience]", "talk about [topic]", or asks to present technical content in Red Hat style. This skill is specifically for HTML output — if the user explicitly asks for .pptx, use the pptx skill instead, but suggest this skill as an alternative for easy sharing.

33 Updated 3 weeks ago
toddward
Web & Frontend Solid

plan-design-review

Designer's eye plan review — interactive, like CEO and Eng review. Rates each design dimension 0-10, explains what would make it a 10, then fixes the plan to get there. Works in plan mode. For live site visual audits, use /design-review. Use when asked to "review the design plan" or "design critique". Proactively suggest when the user has a plan with UI/UX components that should be reviewed before implementation.

31 Updated today
aimasteracc
Web & Frontend Solid

design

Designs modular high-level architectures from functional requirements and produces design documents for each module. Use when designing a new system, creating architecture documentation, or producing module-level design specs with integration contracts and test specifications.

423 Updated 1 months ago
vladikk