Run any Skill in Manus with one click

ui-component

Stars1

Forks0

UpdatedFebruary 25, 2026 at 13:03

Generates UI components following vanilla JS, accessible HTML, and CSS custom property conventions. Use when creating frontend components.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

peopleforrester

peopleforrester/Webinar_Claude_Code_Hands_On

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	ui-component
description	Generates UI components following vanilla JS, accessible HTML, and CSS custom property conventions. Use when creating frontend components.

When creating a UI component:

Technology

Vanilla JavaScript (ES6+) — no frameworks, no libraries, no CDN links
No build tools (no webpack, vite, parcel)
Must work by opening the HTML file directly in a browser

HTML

Use semantic HTML5 elements (main, section, article, header, nav, footer)
All interactive elements must be keyboard-navigable
Include proper ARIA labels on non-semantic interactive elements
Use data attributes for JS hooks, not classes

CSS

Define all colors and spacing as CSS custom properties on :root
Use Flexbox or CSS Grid for layout (no floats)
Mobile-first responsive design with min-width breakpoints
No inline styles — all styling in a separate .css file

JavaScript

Use const/let (never var)
Event delegation where appropriate
Separate data from presentation logic
All sample/mock data defined as a const array at the top of the file

File Structure

index.html — markup and structure
styles.css — all styling, custom properties at :root
app.js — data, logic, DOM manipulation

More from this repository

same repository

data-report

peopleforrester/Webinar_Claude_Code_Hands_On

Generates data analysis reports with quality summaries, ASCII tables, and methodology notes. Use when creating data analysis output or reports.

2026-04-251

explain-code

peopleforrester/Webinar_Claude_Code_Hands_On

Explains code with diagrams and analogies. Use when explaining how code works. Intentionally minimal — contrast with meeting-prep-kit for a richer example.

2026-04-251

meeting-prep-kit

peopleforrester/Webinar_Claude_Code_Hands_On

Transform a raw meeting transcript into a stakeholder-ready prep kit — executive summary, decisions log, action items CSV, follow-up email, and topic-by-topic timeline with sentiment. Use when the user has a meeting transcript file and needs artifacts for attendees, stakeholders who missed the meeting, or downstream execution.

2026-04-081

api-scaffold

peopleforrester/Webinar_Claude_Code_Hands_On

Scaffolds REST API endpoints with input validation, error handling, and tests. Use when creating API endpoints or microservices.

2026-02-251

docker-review

peopleforrester/Webinar_Claude_Code_Hands_On

Reviews Dockerfiles and container configs for security and best practices. Use when reviewing or creating Docker configurations.

2026-02-251

name	ui-component
description	Generates UI components following vanilla JS, accessible HTML, and CSS custom property conventions. Use when creating frontend components.

When creating a UI component:

Technology

Vanilla JavaScript (ES6+) — no frameworks, no libraries, no CDN links
No build tools (no webpack, vite, parcel)
Must work by opening the HTML file directly in a browser

HTML

Use semantic HTML5 elements (main, section, article, header, nav, footer)
All interactive elements must be keyboard-navigable
Include proper ARIA labels on non-semantic interactive elements
Use data attributes for JS hooks, not classes

CSS

Define all colors and spacing as CSS custom properties on :root
Use Flexbox or CSS Grid for layout (no floats)
Mobile-first responsive design with min-width breakpoints
No inline styles — all styling in a separate .css file

JavaScript

Use const/let (never var)
Event delegation where appropriate
Separate data from presentation logic
All sample/mock data defined as a const array at the top of the file

File Structure

index.html — markup and structure
styles.css — all styling, custom properties at :root
app.js — data, logic, DOM manipulation