skills.rest
bereniketech
bereniketechCOMMUNITY
Explore all skills by this author →
GitHub

presentations-ui-design

Designs token-driven UI components and browser-based presentations with HTML slides.

Updated Aug 23, 2026
Search Tags:#design#presentations#ui#accessibility#components#tokens#design-systems
One-click install
npx skills add https://github.com/bereniketech/claude_kit --skill presentations-ui-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: presentations-ui-design
Source: https://github.com/bereniketech/claude_kit/tree/main/skills/ui-design/presentations-ui-design
Command: npx skills add https://github.com/bereniketech/claude_kit --skill presentations-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams designing UI components and presentations often drift between visuals, tokens, and implementation. This skill unifies component design with token-driven design systems and browser-based presentations to streamline delivery.

Core Features & Use Cases

  • Token-auditing and alignment for colors, typography, spacing, and radii to ensure consistent visuals across components and slides.
  • Component-first approach: primitives, molecules, and organisms that can be composed into layouts and presentation decks.
  • Responsive, accessible browser-based presentations and HTML slides suitable for pitches, tutorials, and design reviews.
  • Guidance for integrating existing libraries (e.g., shadcn/ui) and best practices for tokens, accessibility, and keyboard navigation.

Quick Start

Audit tokens, build a small component tree, and render a slide deck following the guidelines in this skill.

Frequently Asked Questions about presentations-ui-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design UI components that stay consistent with my design tokens?▼

Design UI components using a token-driven workflow that audits colors, typography, spacing, and radii to ensure visual consistency. This approach aligns component primitives and molecules directly with your established design tokens.

Can I build browser-based presentations using a component-first design system?▼

Yes, you can build browser-based presentations using a component-first approach. HTML slides composed from UI primitives and molecules create responsive, accessible decks suitable for pitches and design reviews.

Does this workflow integrate with existing UI libraries like shadcn/ui?▼

Yes, this workflow supports integrating existing UI libraries like shadcn/ui. It provides guidance for combining external components with your token-driven design system while maintaining accessibility and compatibility.

What is the best way to audit design tokens for colors and typography?▼

The best way to audit design tokens is through a token-alignment process that reviews colors, typography, spacing, and radii. This ensures your UI components and presentation slides maintain consistent visual standards.

How do I make accessible HTML slides for design reviews?▼

Create accessible HTML slides by following keyboard navigation guidelines and responsive patterns within a token-driven component system. This ensures browser-based presentations meet accessibility standards for design reviews.

When should I consolidate design systems into a token-driven workflow?▼

Consolidate design systems into a token-driven workflow when UI components and presentations drift between visuals and implementation. This unifies component design with design tokens to streamline delivery across web platforms.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
tan-yong-shengtan-yong-sheng
72

frontend-slides

Generate zero-dependency HTML slide decks with inline CSS and JS.

Community
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
dmlguq456dmlguq456
7

design-components

Create reusable React UI components from structured design requirements.

Community
Advanced