stac-screen-builder
Translates product requirements into Stac-compatible widgets and scaffolds screen files with standard design defaults.
Install
mkdir -p .claude/skills/stac-screen-builder && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3112" && unzip -o skill.zip -d .claude/skills/stac-screen-builder && rm skill.zipInstalls to .claude/skills/stac-screen-builder
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build Stac DSL screens and themes from product requirements with safe defaults and reusable templates. Use when users ask to create or refactor StacScreen files, map UI requirements to Stac widgets/actions/styles, or scaffold new screen/theme files.Key capabilities
- →Map product requirements to Stac widgets
- →Scaffold screen and theme files
- →Apply navigation and state patterns
- →Generate Stac DSL code snippets
How it works
The skill translates functional requirements into Stac DSL by selecting appropriate widgets, actions, and styles from defined references.
Inputs & outputs
When to use stac-screen-builder
- →Creating new screens in Stac DSL
- →Refactoring UI theme definitions
- →Generating navigation patterns
About stac-screen-builder
Maps functional product requirements to Stac-compatible widgets, actions, and styles. It scaffolds screen files and applies safe design defaults.
Build Stac DSL screens and themes from product requirements with safe defaults and reusable templates. Use when users ask to create or refactor StacScreen files, map UI requirements to Stac widgets/actions/styles, or scaffold new screen/theme files.
When not to use it
- →Projects not using Stac DSL
Prerequisites
Limitations
- →Requires adherence to Stac DSL structure
- →Limited to provided templates and widget references
How it compares
It uses pre-defined templates and safe defaults instead of manual DSL file construction.
Compared to similar skills
stac-screen-builder side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| stac-screen-builder (this skill) | 1 | 6mo | Review | Intermediate |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| svg-precision | 527 | 4mo | Review | Intermediate |
| mobile-android-design | 101 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by StacDev
View all by StacDev →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
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.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".