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

Frontend UI

by fossasia in fossasia/eventyay

Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components

Apache-2.0Auto-check passedFrontend & Design

Install Frontend UI

skills CLI
$ npx skills add fossasia/eventyay --skill frontend-ui -a claude-code

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

GitHub CLI
$ gh skill install fossasia/eventyay frontend-ui --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/fossasia/eventyay.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/frontend-ui .claude/skills/frontend-ui && 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
frontend-ui
GitHub stars
1.7k
Token cost
~299 tokens
SKILL.md length
119 words
Files
4 (incl. references, assets)
Skills in repo
21
Repo updated
First seen
Licence
Apache-2.0

At a glance

Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components

  • Works in 5 steps: Identify whether the change belongs to… → Keep behavior in external scripts (no… → Ensure responsive behavior across common… → …
  • Tasks that involve Frontend development
  • SKILL.md covers When to Use, Core Workflow, Guardrails and Supporting Artifacts
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend UI is an agent skill from fossasia/eventyay. Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components

Its SKILL.md is about 300 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files and assets (for example `assets/ui-pr-checklist-template.md`, `references/ui-checklist.md` and `tests/ui-scenarios.md`).

It sits in Frontend & Design, covering Frontend development, Backend development and Accessibility. It works with Vue.js and Django. The repository describes itself as: Open Source Event Management, Ticketing and Checkins, Talks and Schedules, Video and Interpretations, Badges, Exhibitions and more https://eventyay.com. The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve Frontend development
  • Tasks that involve Backend development
  • Tasks that involve Accessibility

Example prompts

  • “/frontend-ui”

Workflow steps

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

  1. Identify whether the change belongs to legacy static assets or a Vue app.
  2. Keep behavior in external scripts (no inline JS; no jQuery).
  3. Ensure responsive behavior across common mobile and desktop widths.
  4. Validate accessibility basics: labels, keyboard navigation, focus visibility, and semantic landmarks.
  5. Add or update tests when UI behavior changes are user-visible.

What it can do on your machine

Read from SKILL.md and the folder at commit 26ab310. 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.

    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

Frontend UI loads about 299 tokens when it runs, and up to ~487 if it reads all its reference files. Until then it costs about 29 tokens; SKILL.md has 119 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~29
When it runs · the whole SKILL.md, loaded when a task matches
~299
With references · SKILL.md plus every file in references/, read only if the agent opens them
~487

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

The full file from fossasia/eventyay at commit 26ab310, republished under its Apache-2.0 licence (© fossasia). 119 words, ~299 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-ui/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
frontend-ui
description
Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components

Skill: Frontend UI

When to Use

Use this skill when implementing or modifying UI behavior in:

  • app/eventyay/static/ assets
  • app/eventyay/webapp/ Vue applications
  • Django templates under app/eventyay/**/templates/

Core Workflow

  1. Identify whether the change belongs to legacy static assets or a Vue app.
  2. Keep behavior in external scripts (no inline JS; no jQuery).
  3. Ensure responsive behavior across common mobile and desktop widths.
  4. Validate accessibility basics: labels, keyboard navigation, focus visibility, and semantic landmarks.
  5. Add or update tests when UI behavior changes are user-visible.

Guardrails

  • Follow .github/instructions/js.instructions.md for JS/Vue conventions.
  • Follow .github/instructions/django-template.instructions.md for template conventions.
  • Preserve existing design language unless the task explicitly requests a redesign.

Supporting Artifacts

  • Implementation references: references/
  • Reusable templates/checklists: assets/
  • Example validation scenarios: tests/

© fossasia, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references, assets) in .agents/skills/frontend-ui of fossasia/eventyay.

  • SKILL.md
  • assets/ui-pr-checklist-template.md
  • references/ui-checklist.md
  • tests/ui-scenarios.md

Open the folder on GitHubat commit 26ab310

Compare with similar skills

Frontend UI 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.

Frontend UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend UI this skillfossasia/eventyay1.7k—~299Automated safety check: PassApache-2.0
Frontend Designjjyaoao/HelloAgents3.2k1 repos~7kAutomated safety check: PassMIT
Accessibility LeadCommunity-Access/accessibility-agents423—~932Automated safety check: PassMIT
UI CraftMemTensor/memmy-agent2.1k—~2.9kAutomated safety check: PassMIT
Vue Component Developmentgdarko/laravel-vue-starter145—~1.1kAutomated safety check: PassMIT
Implementing Navigationancoleman/ai-design-components526—~1.8kAutomated safety check: PassMIT

Similar skills

  • Frontend Design

    jjyaoao/HelloAgents

    Transform UI style requirements into production-ready frontend code with systematic design tokens, accessibility compliance, and creative execution.

    3.2k GitHub starsUsed in 1 repo~7k tokens
    Frontend & DesignAuto-check passed

  • Accessibility Lead

    Community-Access/accessibility-agents

    Web UI accessibility lead. An agent skill from Community-Access/accessibility-agents.

    423 GitHub stars~932 tokensUpdated 16 days ago
    Frontend & DesignAuto-check passed

  • UI Craft

    MemTensor/memmy-agent

    Design, build, redesign, or modify browser-visible web interfaces with product-quality composition, visual systems, interaction states, responsive behavior, accessibility, and browser visual QA.

    2.1k GitHub stars~2.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Vue Component Development

    gdarko/laravel-vue-starter

    Activate when creating or modifying Vue 3 components, pages, layouts, stores, or services in the frontend.

    145 GitHub stars~1.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • Implementing Navigation

    ancoleman/ai-design-components

    Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration.

    526 GitHub stars~1.8k tokensUpdated 10 mo ago
    Frontend & DesignAuto-check passed

  • Web Coder

    boshi-xixixi/TraeSkill

    Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards.

    275 GitHub starsUsed in 1 repo~5.2k tokens
    Frontend & DesignAuto-check passed

More from fossasia/eventyay

All 21 skills in this repo

  • Stripe Projects

    fossasia/eventyay

    A skill your agent uses when the user wants to provision infrastructure or third-party services using Stripe Projects.

    1.7k GitHub starsUsed in 5 repos~2k tokens
    Auto-check: notes

  • Stripe Apps

    fossasia/eventyay

    A skill your agent uses when building, modifying, or reviewing a Stripe App — or when the user describes something that implies one (e.g.

    1.7k GitHub starsUsed in 1 repo~3.6k tokens
    Auto-check passed

  • Connect Recommend

    fossasia/eventyay

    A skill your agent uses when the user asks about Stripe Connect configuration, charge patterns, Dashboard access, or how to get started with Connect, is building a marketplace, platform…

    1.7k GitHub starsUsed in 1 repo~5.9k tokens
    Auto-check: warnings

  • Django Run Locally

    fossasia/eventyay

    Steps for initiating the Django development server without Docker

    1.7k GitHub stars~411 tokensUpdated today
    Auto-check passed

  • Docker Deployment

    fossasia/eventyay

    Docker Compose, container services, deployment. An agent skill from fossasia/eventyay.

    1.7k GitHub stars~574 tokensUpdated today
    Auto-check: notes

  • Stripe Best Practices

    fossasia/eventyay

    Guides Stripe integration decisions across development and test environment planning (separate sandboxes vs the shared test mode sandbox), API selection (Checkout Sessions vs PaymentIntents)…

    1.7k GitHub starsUsed in 1 repo~1.7k tokens
    Auto-check passed

Works with

Categories

Questions about Frontend UI

What does Frontend UI do?

Frontend UI implementation, accessibility, and responsive checks for Django templates and Vue components. Frontend UI is an agent skill from fossasia/eventyay.

When should I use Frontend UI?

Frontend UI fits situations like: tasks that involve Frontend development; tasks that involve Backend development; tasks that involve Accessibility.

How do I install Frontend UI in Claude Code?

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

How do I install Frontend UI in Codex?

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

Can I use Frontend UI 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 fossasia/eventyay --skill frontend-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-ui, .gemini/skills/frontend-ui, .github/skills/frontend-ui and .opencode/skills/frontend-ui in your project.

What does Frontend UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend UI is instructions for the agent only.

Does Frontend UI 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 Frontend UI 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 Frontend UI use?

Frontend UI is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend UI use?

About 299 tokens (SKILL.md is roughly 1.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 188 tokens, read only when the agent opens those files.

What are the alternatives to Frontend UI?

Skills that share tags, products or a category with Frontend UI: Frontend Design (jjyaoao/HelloAgents, 3.2k stars), Accessibility Lead (Community-Access/accessibility-agents, 423 stars), UI Craft (MemTensor/memmy-agent, 2.1k stars) and Vue Component Development (gdarko/laravel-vue-starter, 145 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend UI?

fossasia (a GitHub organization) maintains it in fossasia/eventyay, which has 1,702 GitHub stars. The repository holds 21 skills in this directory. The repository was last updated on October 9, 2026.

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