원클릭으로 Manus에서 모든 스킬 실행

ui-component

스타1

포크0

업데이트2026년 2월 25일 13:03

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

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

peopleforrester

peopleforrester/Webinar_Claude_Code_Hands_On

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

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

이 저장소의 다른 Skills

같은 저장소

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