agentskills.codes
DE

design

by CONFHUBBDesignSource

A structured approach to implementing UI components using themes and responsive layout patterns.

UI designFrontend

Install

mkdir -p .claude/skills/design-confhubb && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9824" && unzip -o skill.zip -d .claude/skills/design-confhubb && rm skill.zip

Installs to .claude/skills/design-confhubb

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.

When implementing UI components, themes, or responsive layouts.
63 chars✓ has a “when” trigger
Intermediate

Key capabilities

  • →Extend ThemeData for custom tokens
  • →Implement responsive layouts using LayoutBuilder
  • →Configure light and dark theme modes
  • →Define component interaction styles via WidgetStateProperty
  • →Handle remote images with CachedNetworkImage

How it works

The skill utilizes Flutter's ThemeExtension for custom data and LayoutBuilder to conditionally render widgets based on screen constraints.

Inputs & outputs

You give it
UI component or theme definition requirements
You get back
Adaptive, theme-compliant widget implementation

When to use design

  • →Implementing global theme extensions
  • →Building responsive dashboards
  • →Setting up widget interaction styles

About this skill

Design System

When to use

  • Creating new UI widgets or screens.
  • Updating the app's theme or color palette.

Core Principles

  • Strict Theming: No hardcoded colors. Use Theme.of(context) and ColorScheme.
  • Responsive: Adapt to screen size using LayoutBuilder or standard breakpoints.

Implementation Guide

1) Theming & Extensions

Extend ThemeData for custom tokens instead of hardcoding constants.

@immutable
class AppColors extends ThemeExtension<AppColors> {
  final Color brandGlow;
  // ... implementation ...
}

extension AppThemeX on BuildContext {
  AppColors get colors => Theme.of(this).extension<AppColors>()!;
  TextTheme get text => Theme.of(this).textTheme;
}

// Usage
final glow = context.colors.brandGlow;
Text(
  'Title',
  style: context.text.displayLarge,
);

When supporting dark mode, wire all three on MaterialApp:

MaterialApp(
  theme: lightTheme,
  darkTheme: darkTheme,
  themeMode: ThemeMode.system,
);

Define component interaction styles in theme objects via WidgetStateProperty instead of inline button styles.

2) Responsive Layouts

Use LayoutBuilder to switch between mobile and desktop/tablet layouts.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return const WideLayout();
    }
    return const NarrowLayout();
  },
)

3) Accessibility & Media Resilience

  • Ensure critical UI remains usable under larger text scales (up to 200%).
  • Add semantic labels for non-obvious interactive controls.
  • Prefer CachedNetworkImage for remote images with explicit placeholder and error states.
import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: imageUrl,
  fit: BoxFit.cover,
  placeholder: (context, url) {
    return const Center(child: CircularProgressIndicator());
  },
  errorWidget: (context, url, error) {
    return const Icon(Icons.broken_image);
  },
);

When not to use it

  • →Hardcoding colors or constants directly in widgets

Prerequisites

cached_network_image package

Limitations

  • →Requires manual wiring of theme modes in MaterialApp
  • →Limited to UI component and layout implementation tasks

How it compares

This approach enforces centralized theme management and responsive logic instead of relying on inline styling or hardcoded values.

Compared to similar skills

design side by side with the closest alternatives in the catalog.

SkillInstallsUpdatedSafetyDifficulty
design (this skill)04moNo flagsIntermediate
ui-ux-pro-max1,9095moReviewIntermediate
svg-precision5274moReviewIntermediate
mobile-android-design1012moNo flagsIntermediate

Try saying

Example prompts that trigger this skill in your AI assistant.

You might also like

ui-ux-pro-max

nextlevelbuilder

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.

1,9092,023

svg-precision

dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

5271,229

mobile-android-design

wshobson

Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.

101335

frontend-slides

sickn33

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

95195

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.

101142

penpot-uiux-design

github

Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".

27145

Search skills

Search the agent skills registry