guest-list-ui
Handles UI updates, mobile check-in logic, and CSV exports for the guest list app.
Install
mkdir -p .claude/skills/guest-list-ui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/16836" && unzip -o skill.zip -d .claude/skills/guest-list-ui && rm skill.zipInstalls to .claude/skills/guest-list-ui
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.
Use when changing guest-list features, German UI text, mobile check-in workflow, CSV import/export, filtering/search, dashboard totals, accessibility, or responsive UI in the static app.Key capabilities
- →Preserve the German, mobile-first check-in workflow
- →Maintain fast performance for common event actions like search and check-in
- →Keep search client-side over loaded guests
- →Preserve accessibility labels and keyboard-friendly controls
- →Maintain stable layout on narrow mobile and tablet screens
- →Avoid decorative complexity in the UI
How it works
The skill guides changes to the guest-list UI by adhering to principles like mobile-first design, client-side search, accessibility, and stable layouts, ensuring compatibility with the data model.
Inputs & outputs
When to use guest-list-ui
- →Updating guest list UI
- →Implementing CSV export
- →Optimizing mobile check-in
- →Accessibility audits
About this skill
Guest List UI Skill
Use this workflow for app behavior and interface changes.
Principles
- Preserve the German, mobile-first check-in workflow.
- Keep common event actions fast: role entry, search, check-in, support comment update, CSV import, CSV export, dashboard review.
- Keep search client-side over loaded guests; do not query Firestore on each keystroke.
- Preserve accessibility labels and keyboard-friendly controls where present.
- Keep layout stable on narrow mobile screens and tablet-sized devices.
- Avoid decorative complexity that makes the tool harder to scan at the event entrance.
MVP Data
Guest records should remain compatible with firebase.rules and docs/handoff/FIRESTORE_DATA_MODEL_DE.md.
Core guest fields:
guestIdnamesearchNamecategorystatussupportCommentinternalNotecheckedInAtcheckedInByUidcheckedInByNamecheckedInDevicecreatedAtupdatedAt
Status values:
openchecked_inno_show
Verification
After JavaScript edits:
Get-Content app.js -Raw | node --check --input-type=module
Manual checks should cover setup, role join, CSV import, search, duplicate check-in behavior, support comments, No Show, export, and reload behavior.
When not to use it
- →When implementing features unrelated to the guest-list UI
- →When the task involves querying Firestore on each keystroke for search
- →When the user wants to add decorative complexity to the interface
Limitations
- →Requires compatibility with `firebase.rules` and `FIRESTORE_DATA_MODEL_DE.md`
- →Search must remain client-side over loaded guests
- →Status values are limited to `open`, `checked_in`, `no_show`
How it compares
This skill provides specific principles and verification steps for guest-list UI changes, ensuring consistency and performance, unlike a generic UI development approach.
Compared to similar skills
guest-list-ui side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| guest-list-ui (this skill) | 0 | 3mo | No flags | Intermediate |
| frontend-ui-engineering | 0 | 2mo | No flags | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
frontend-ui-engineering
charlieviettq
Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone.
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.
anthropic-frontend-design
chaibuilder
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.
threejs-postprocessing
CloudAI-X
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
snapdom
2025Emma
snapDOM is a fast, accurate DOM-to-image capture tool that converts HTML elements into scalable SVG images. Use for capturing HTML elements, converting DOM to images (SVG, PNG, JPG, WebP), preserving styles, fonts, and pseudo-elements.
vrm-mtoon-outline
Project-N-E-K-O
Adjusting VRM MToon material outline thickness in three-vrm. Covers outline width modes, property access, and how to fix outlines that appear too thick when models are scaled.