New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Windmill Svelte Frontend Patterns

by windmill-labs in windmill-labs/windmill

Enforces Windmill-specific Svelte habits: reuse one of 1,600+ existing components, follow the brand guidelines by section, and never fall back to raw HTML elements.

Custom licenceAuto-check passedFrontend & Design

Install Windmill Svelte Frontend Patterns

skills CLI
$ npx skills add windmill-labs/windmill --skill svelte-frontend -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install windmill-labs/windmill svelte-frontend --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/windmill-labs/windmill.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/svelte-frontend .claude/skills/svelte-frontend && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
svelte-frontend
GitHub stars
18k
Token cost
~1.5k tokens
SKILL.md length
671 words
Files
1
Skills in repo
42
Repo updated
First seen
Licence
Custom licence

At a glance

Enforces Windmill-specific Svelte habits: reuse one of 1,600+ existing components, follow the brand guidelines by section, and never fall back to raw HTML elements.

  • Works in 4 steps: list-sections: Call first to discover… → get-documentation: Fetch relevant… → svelte-autofixer: MUST use on all Svelte… → …
  • Writing or modifying any Svelte component in Windmill's frontend directory
  • SKILL.md covers Before writing any UI (MUST), Windmill UI Components (MUST…, Form Components and Styling, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Before writing any markup, the skill requires two lookups. First, read the 28-line design-system barrel at frontend/src/lib/components/common/index.ts in full, since it exports far more than a handful of obvious components, including Alert, Drawer, Menu, Tabs, Skeleton and ActionRow, and even that barrel is not the whole picture: dozens of subdirectories like modal, popup, stepper and table exist but must be imported directly by path.

Second, read only the relevant section of frontend/brand-guidelines.md rather than its full 34k characters, using a table that maps what is being built, such as buttons, color usage, typography or spacing, to the heading to jump to, found with grep -n '^#' on the file first.

With over 1,600 components already in the tree, the instruction is to grep for the thing about to be built, since it almost certainly exists, and treat building something new as the last resort rather than the first move. Raw HTML elements are explicitly disallowed in favor of Windmill's own design-system components.

When your agent uses it

  • Writing or modifying any Svelte component in Windmill's frontend directory
  • Finding an existing design-system component before building a new one
  • Checking the brand guidelines for a specific UI element like buttons or spacing

Example prompts

  • “Add a settings drawer to this page using Windmill's existing components.”
  • “Which component should I use for a confirmation dialog in the frontend?”
  • “Check the brand guidelines for button hierarchy before I add this CTA.”

Requirements

  • A Windmill frontend checkout

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. list-sections: Call first to discover available docs
  2. get-documentation: Fetch relevant sections based on use_cases
  3. svelte-autofixer: MUST use on all Svelte code before finalizing — keep calling until no issues
  4. playground-link: Only after user confirms and code was NOT written to project files

What it can do on your machine

Read from SKILL.md and the folder at commit fb22e5c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are svelte).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Windmill Svelte Frontend Patterns loads about 1.5k tokens when it runs. Until then it costs about 34 tokens; SKILL.md has 671 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~34
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 671 words (~1,530 tokens).

“Apply these Windmill-specific patterns when writing Svelte code in frontend/. For general Svelte 5 syntax (runes, snippets, event handling), use the Svelte MCP server.”

— opening of SKILL.md by windmill-labs, Custom licence
name
svelte-frontend

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .agents/skills/svelte-frontend of windmill-labs/windmill.

Open the folder on GitHubat commit fb22e5c

Compare with similar skills

Windmill Svelte Frontend Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Windmill Svelte Frontend Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Windmill Svelte Frontend Patterns this skillwindmill-labs/windmill18k—~1.5kAutomated safety check: PassCustom licence
Design StyleCastor6/tactus3761 repos~2.1kAutomated safety check: PassApache-2.0
GSAP in Vue, Nuxt and Sveltegreensock/gsap-skills16k4 repos~2.6kAutomated safety check: PassMIT
Svelte Core Best Practicesrilldata/rill2.9k4 repos~1.8kAutomated safety check: PassApache-2.0
Preline UI Components via MCPhtmlstreamofficial/preline6.5k—~2.9kAutomated safety check: PassCustom licence
Spartan UI Angular Componentsspartan-ng/spartan2.9k—~2.4kAutomated safety check: PassMIT

Similar skills

  • Design Style

    Castor6/tactus

    A skill your agent uses whenever the user asks to build, create, design, develop, improve, or style any frontend interface or visual element.

    376 GitHub starsUsed in 1 repo~2.1k tokens
    Frontend & DesignAuto-check passed

  • GSAP in Vue, Nuxt and Svelte

    greensock/gsap-skills

    Shows how to use GSAP in Vue, Nuxt, Svelte and other lifecycle-based frameworks: create after mount, scope selectors to the component, and revert on unmount.

    16k GitHub starsUsed in 4 repos~2.6k tokens
    Frontend & DesignAuto-check passed

  • Svelte Core Best Practices

    rilldata/rill

    Rules for writing idiomatic Svelte 5 code: when to reach for runes like state, derived and effect, and how to handle props, attachments and bindings.

    2.9k GitHub starsUsed in 4 repos~1.8k tokens
    Frontend & DesignAuto-check passed

  • Preline UI Components via MCP

    htmlstreamofficial/preline

    Adds Preline UI components and blocks to HTML files by querying the Preline MCP server, with rules for exact slugs and for clarifying vague requests.

    6.5k GitHub stars~2.9k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Spartan UI Angular Components

    spartan-ng/spartan

    Helps add, compose, debug and style spartan/ui components in Angular projects, using its Brain headless primitives and Helm styled layer through the @spartan-ng/cli generators.

    2.9k GitHub stars~2.4k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Uncodixfy

    pdsuwwz/chatgpt-vue3-light-mvp

    Prevents generic AI/Codex UI patterns when generating frontend code.

    578 GitHub starsUsed in 2 repos~3k tokens
    Frontend & DesignAuto-check passed

More from windmill-labs/windmill

All 42 skills in this repo

  • Windmill Trigger Type Checklist

    windmill-labs/windmill

    Checklist of every backend, frontend, CLI and capture change needed to add a new TriggerCrud-based trigger type, such as Azure, GCP or Kafka, to Windmill.

    18k GitHub stars~4.7k tokensUpdated today
    Auto-check passed

  • Windmill AI Evals

    windmill-labs/windmill

    Writes and runs black-box benchmark cases for Windmill's flow, app, script, CLI and global AI generation modes, including before-and-after comparisons.

    18k GitHub stars~969 tokensUpdated today
    Auto-check: notes

  • Domain Modeling and Glossary

    windmill-labs/windmill

    Actively challenges vague or conflicting terminology as you design, and keeps a living domain glossary file up to date in real time.

    18k GitHub stars~622 tokensUpdated today
    Auto-check passed

  • Local PR Review

    windmill-labs/windmill

    Runs the same code review locally that GitHub's auto-review actions run on a PR, delegating to a fresh-context subagent so the review isn't biased by the main session's own reasoning.

    18k GitHub stars~995 tokensUpdated today
    Auto-check passed

  • Draft PR with CI Rounds

    windmill-labs/windmill

    Opens a draft GitHub pull request with a conventional title and explicit body, then drives CI review rounds before marking it ready.

    18k GitHub stars~3.4k tokensUpdated today
    Auto-check passed

  • Windmill Dev Page Preview

    windmill-labs/windmill

    Opens the Windmill dev page to preview a flow, script or app, choosing between proxy and direct mode and deciding whether the agent or the runtime starts the wmill dev server.

    18k GitHub stars~1.8k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Windmill Svelte Frontend Patterns

What does Windmill Svelte Frontend Patterns do?

Enforces Windmill-specific Svelte habits: reuse one of 1,600+ existing components, follow the brand guidelines by section, and never fall back to raw HTML elements. Before writing any markup, the skill requires two lookups.ts in full, since it exports far more than a handful of obvious components, including Alert, Drawer, Menu, Tabs, Skeleton and ActionRow, and even that barrel is not the whole picture: dozens of subdirectories like modal, popup, stepper and table exist but must be imported directly by path.

When should I use Windmill Svelte Frontend Patterns?

Windmill Svelte Frontend Patterns fits situations like: writing or modifying any Svelte component in Windmill's frontend directory; finding an existing design-system component before building a new one; checking the brand guidelines for a specific UI element like buttons or spacing.

How do I install Windmill Svelte Frontend Patterns in Claude Code?

Run `npx skills add windmill-labs/windmill --skill svelte-frontend -a claude-code`. Or copy the skill folder (.agents/skills/svelte-frontend in windmill-labs/windmill) into .claude/skills/svelte-frontend in your project. Claude Code loads it when a task matches its description.

How do I install Windmill Svelte Frontend Patterns in Codex?

Run `npx skills add windmill-labs/windmill --skill svelte-frontend -a codex`. Or copy the skill folder (.agents/skills/svelte-frontend in windmill-labs/windmill) into .agents/skills/svelte-frontend in your project. Codex loads it when a task matches its description.

Can I use Windmill Svelte Frontend Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add windmill-labs/windmill --skill svelte-frontend -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/svelte-frontend, .gemini/skills/svelte-frontend, .github/skills/svelte-frontend and .opencode/skills/svelte-frontend in your project.

What does Windmill Svelte Frontend Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Windmill Svelte Frontend Patterns is instructions for the agent only. Our summary lists: A Windmill frontend checkout.

Does Windmill Svelte Frontend Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Windmill Svelte Frontend Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Windmill Svelte Frontend Patterns use?

Windmill Svelte Frontend Patterns has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Windmill Svelte Frontend Patterns use?

About 1.5k tokens (SKILL.md is roughly 6.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Windmill Svelte Frontend Patterns?

Skills that share tags, products or a category with Windmill Svelte Frontend Patterns: Design Style (Castor6/tactus, 376 stars), GSAP in Vue, Nuxt and Svelte (greensock/gsap-skills, 16k stars), Svelte Core Best Practices (rilldata/rill, 2.9k stars) and Preline UI Components via MCP (htmlstreamofficial/preline, 6.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Windmill Svelte Frontend Patterns?

windmill-labs (a GitHub organization) maintains it in windmill-labs/windmill, which has 18,146 GitHub stars. The repository holds 42 skills in this directory. The repository was last updated on October 9, 2026.

Source: windmill-labs/windmill on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.