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

ui-website

스타30

포크8

업데이트2026년 4월 10일 20:47

Design guidance for React websites with CSS-based theming. Covers typography (Google Fonts), color palettes via CSS variables, motion/animation, accessibility (WCAG 2.1 AA), backgrounds, responsive layout, and aesthetic mood mapping. Use for public-facing and portal-style websites. For Fluent UI v9 business apps, use the `ui-fluentui-react` skill instead. Triggers on "website design", "website theming", "google fonts", "css variables", "design aesthetics", "website ui", "website styling", "react website", "css theming", "design system", "website accessibility", "web typography", "color palette", "css animation", "responsive layout", "dark mode", "light mode", "theme toggle", "useTheme", "theme tokens", "theme switching".

설치

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

Manus에서 실행

출처

scottdurow

scottdurow/power-platform-full-stack-skills

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

다운로드

Manus에서 실행

Website UI — React Design & Theming

You are an expert in designing and styling React websites with CSS-based theming. This skill covers typography, color, motion, accessibility, responsive layout, and aesthetic direction for public-facing and portal-style websites.

When to use this skill vs ui-fluentui-react:

This skill (ui-website): Public-facing websites, marketing sites, portals, Power Pages code sites — uses CSS variables, Google Fonts, custom color palettes, CSS animations.

ui-fluentui-react: Enterprise/business apps, internal tools, Power Apps Code Apps — uses @fluentui/react-components, makeStyles, design tokens.

Resources

Resource	Content
`resources/theming.md`	CSS variables architecture, dark/light mode, useTheme hook, theme toggle, custom themes
`resources/design-aesthetics.md`	Font, color, motion, accessibility, and layout guidance
`resources/design-application.md`	Step-by-step process for applying design to a React website

Load the relevant resource when working on website design and theming tasks.

Core Principles

CSS variables for theming — Define all colors, fonts, and spacing as CSS custom properties in :root. Never hardcode values in components.
Google Fonts for typography — Choose distinctive, beautiful fonts. Never use generic defaults (Inter, Roboto, Open Sans, Arial).
Semantic HTML for accessibility — Use <header>, <nav>, <main>, <section>, <footer>. Meet WCAG 2.1 AA standards.
Motion with purpose — CSS animations for high-impact moments (page load reveals, hover states). Respect prefers-reduced-motion.
Responsive by default — Use CSS flex/grid with gap, container max-widths, and @media queries.
React-only — All component patterns use React with TypeScript. No multi-framework abstractions.

Quick Reference — CSS Variable Structure

Every website should define these CSS variables in a global stylesheet:

:root {
  /* Typography */
  --font-heading: '<Display Font>', sans-serif;
  --font-body: '<Body Font>', sans-serif;
  --font-mono: '<Mono Font>', monospace;

  /* Colors */
  --color-primary: <hex>;
  --color-secondary: <hex>;
  --color-accent: <hex>;
  --color-bg: <hex>;
  --color-surface: <hex>;
  --color-text: <hex>;
  --color-text-muted: <hex>;
  --color-border: <hex>;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

Quick Reference — Aesthetic x Mood Mapping

Aesthetic	Mood	Font Direction	Color Direction	Motion Direction
Minimal & Clean	Professional	IBM Plex Sans + JetBrains Mono	Neutral with one sharp accent	Subtle fades, minimal
Minimal & Clean	Creative	Space Grotesk + Crimson Pro	Muted pastels with pop accent	Smooth reveals
Bold & Vibrant	Professional	Cabinet Grotesk + Fira Code	Strong primary + contrasting accent	Confident slide-ins
Bold & Vibrant	Creative	Clash Display + Bricolage Grotesque	Saturated complementary pair	Energetic staggers
Dark & Moody	Technical	JetBrains Mono + Space Grotesk	Dark base (IDE-inspired) + neon accent	Terminal-style fades
Dark & Moody	Elegant	Playfair Display + Source Sans 3	Deep charcoals + gold/copper accent	Slow, cinematic reveals
Warm & Organic	Professional	Newsreader + IBM Plex Sans	Earth tones + warm accent	Gentle eases
Warm & Organic	Creative	Fraunces + Satoshi	Terracotta/sage/cream palette	Organic, springy motion

Cross-Skill References

Need	Skill
Fluent UI v9 components for business apps	`../ui-fluentui-react/SKILL.md`
Power Pages site creation & deployment	`../power-pages/SKILL.md`
Vite + React project structure	`../vite-react/SKILL.md`

이 저장소의 다른 Skills

같은 저장소

browser-automation

scottdurow/power-platform-full-stack-skills

Interactive browser automation and visual validation using Playwright MCP server and GitHub Copilot Agent Mode. Creates a bridge between the agent and a live browser session (including authenticated user context), with optional scripted Playwright test generation for repeatable checks. Triggers on "browser automation", "interactive browser", "playwright mcp", "test the ui", "ui test", "visual test", "visual regression", "check interface", "deployment smoke test", "post-deploy validation", "config validation".

2026-04-1030

code-review

scottdurow/power-platform-full-stack-skills

Deep code audit and technical review skill. Handles code audits (dead wiring, silent failures, stubs, bloat), architecture decisions, security audits, feature design reviews, refactoring plans, and deployment strategy reviews. Produces actionable reports with file:line references grouped by severity, or structured decision documents with trade-off analysis. Triggers on "code review", "audit the code", "review the code", "find dead code", "find placeholders", "check for stubs", "prune the code", "code cleanup", "implementation review", "completeness check", "find unused code", "architecture decision", "security audit", "design review", "refactoring plan", "deployment review", "team review", "review team", "collaborative review".

2026-04-1030

dataverse-data-review

scottdurow/power-platform-full-stack-skills

Comprehensive Dataverse data model reviewer and critic. Evaluates proposed schemas against 74+ rules covering naming, normalization, data types, business rules, evolvability, and platform-specific best practices. Produces structured assessments with actionable feedback. Triggers on "review my data model", "critique this schema", "is my Dataverse design correct", "data model review", "schema review", "evaluate my tables", "check my data model", "Dataverse best practices review", "normalization check".

2026-04-1030

dataverse-prerequisites

scottdurow/power-platform-full-stack-skills

Shared prerequisite steps for any skill that interacts with the Dataverse OData Web API. Covers PAC CLI authentication, Azure CLI token acquisition, WhoAmI validation, environment URL extraction, and token refresh patterns. Triggers on "pac auth", "dataverse auth", "dataverse prerequisites", "connect to dataverse", "environment setup", "pac env who", "dataverse token", "azure cli token dataverse".

2026-04-1030

dataverse-solution-web-api

scottdurow/power-platform-full-stack-skills

Expert guidance for the Microsoft Dataverse Web API metadata and schema management. Programmatically create tables, columns, relationships, forms, views, app modules, and sitemaps using OData v4.0 RESTful endpoints. Treats application structure as code. Also covers the Dataverse MCP server for natural language queries and CRUD via GitHub Copilot. Triggers on "dataverse api", "web api", "create table", "EntityDefinitions", "AttributeMetadata", "RelationshipDefinitions", "POST /EntityDefinitions", "PublishXml", "dataverse schema", "programmatic schema", "api metadata", "dataverse mcp", "mcp server", "dataverse mcp server", "@microsoft/dataverse", "mcp setup", "mcp dataverse".

2026-04-1030

ioc-development-pattern

scottdurow/power-platform-full-stack-skills

Inversion of Control (IoC) development pattern for building apps with in-memory test data first, then swapping to real data sources. Covers service interfaces, domain models with DTOs, in-memory implementations, service registry, React Query (TanStack Query) integration with cache invalidation, error handling, and incremental backend migration. Triggers on "IoC", "inversion of control", "in-memory data", "mock data", "test data first", "service interface", "swap implementation", "local development pattern", "dev without dataverse", "dev without database", "develop locally", "mock service", "in-memory service", "service abstraction", "data service pattern", "service layer", "react query", "tanstack query", "query key factory", "cache invalidation", "optimistic update", "domain model", "dto pattern".

2026-04-1030

name	ui-website
description	Design guidance for React websites with CSS-based theming. Covers typography (Google Fonts), color palettes via CSS variables, motion/animation, accessibility (WCAG 2.1 AA), backgrounds, responsive layout, and aesthetic mood mapping. Use for public-facing and portal-style websites. For Fluent UI v9 business apps, use the `ui-fluentui-react` skill instead. Triggers on "website design", "website theming", "google fonts", "css variables", "design aesthetics", "website ui", "website styling", "react website", "css theming", "design system", "website accessibility", "web typography", "color palette", "css animation", "responsive layout", "dark mode", "light mode", "theme toggle", "useTheme", "theme tokens", "theme switching".
user-invocable	false

Website UI — React Design & Theming

When to use this skill vs ui-fluentui-react:

This skill (ui-website): Public-facing websites, marketing sites, portals, Power Pages code sites — uses CSS variables, Google Fonts, custom color palettes, CSS animations.

ui-fluentui-react: Enterprise/business apps, internal tools, Power Apps Code Apps — uses @fluentui/react-components, makeStyles, design tokens.

Resources

Resource	Content
`resources/theming.md`	CSS variables architecture, dark/light mode, useTheme hook, theme toggle, custom themes
`resources/design-aesthetics.md`	Font, color, motion, accessibility, and layout guidance
`resources/design-application.md`	Step-by-step process for applying design to a React website

Load the relevant resource when working on website design and theming tasks.

Core Principles

CSS variables for theming — Define all colors, fonts, and spacing as CSS custom properties in :root. Never hardcode values in components.
Google Fonts for typography — Choose distinctive, beautiful fonts. Never use generic defaults (Inter, Roboto, Open Sans, Arial).
Semantic HTML for accessibility — Use <header>, <nav>, <main>, <section>, <footer>. Meet WCAG 2.1 AA standards.
Motion with purpose — CSS animations for high-impact moments (page load reveals, hover states). Respect prefers-reduced-motion.
Responsive by default — Use CSS flex/grid with gap, container max-widths, and @media queries.
React-only — All component patterns use React with TypeScript. No multi-framework abstractions.

Quick Reference — CSS Variable Structure

Every website should define these CSS variables in a global stylesheet:

:root {
  /* Typography */
  --font-heading: '<Display Font>', sans-serif;
  --font-body: '<Body Font>', sans-serif;
  --font-mono: '<Mono Font>', monospace;

  /* Colors */
  --color-primary: <hex>;
  --color-secondary: <hex>;
  --color-accent: <hex>;
  --color-bg: <hex>;
  --color-surface: <hex>;
  --color-text: <hex>;
  --color-text-muted: <hex>;
  --color-border: <hex>;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
}

Quick Reference — Aesthetic x Mood Mapping

Aesthetic	Mood	Font Direction	Color Direction	Motion Direction
Minimal & Clean	Professional	IBM Plex Sans + JetBrains Mono	Neutral with one sharp accent	Subtle fades, minimal
Minimal & Clean	Creative	Space Grotesk + Crimson Pro	Muted pastels with pop accent	Smooth reveals
Bold & Vibrant	Professional	Cabinet Grotesk + Fira Code	Strong primary + contrasting accent	Confident slide-ins
Bold & Vibrant	Creative	Clash Display + Bricolage Grotesque	Saturated complementary pair	Energetic staggers
Dark & Moody	Technical	JetBrains Mono + Space Grotesk	Dark base (IDE-inspired) + neon accent	Terminal-style fades
Dark & Moody	Elegant	Playfair Display + Source Sans 3	Deep charcoals + gold/copper accent	Slow, cinematic reveals
Warm & Organic	Professional	Newsreader + IBM Plex Sans	Earth tones + warm accent	Gentle eases
Warm & Organic	Creative	Fraunces + Satoshi	Terracotta/sage/cream palette	Organic, springy motion

Cross-Skill References

Need	Skill
Fluent UI v9 components for business apps	`../ui-fluentui-react/SKILL.md`
Power Pages site creation & deployment	`../power-pages/SKILL.md`
Vite + React project structure	`../vite-react/SKILL.md`