Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

frontend-development

Sterne22

Forks10

Aktualisiert29. Mai 2026 um 10:54

Build enterprise-grade React applications with IBM Carbon Design System, including reusable components and responsive design patterns

Installation

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

ibm-self-serve-assets

ibm-self-serve-assets/building-blocks

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·SOC 15-1252

Datei-Explorer

5 Dateien

SKILL.md

readonly

name	frontend-development
description	Build enterprise-grade React applications with IBM Carbon Design System, including reusable components and responsive design patterns

Build React applications with IBM Carbon Design System:

Setup React project with Carbon dependencies (@carbon/react, @carbon/icons-react) Configure Carbon theme in SCSS (g100 dark theme recommended) **CRITICAL**: Wrap app with Theme component: `` - SCSS alone is insufficient Use ProductionShell template from `components/ProductionShellTemplate.jsx` for navigation Build components using Carbon components (never create custom versions) Apply responsive design with Carbon Grid system (lg, md, sm breakpoints) Use shared styles from `styles/SharedStyles.scss` for consistency Implement proper state management and API integration patterns Ensure accessibility with ARIA labels and keyboard navigation Test across breakpoints and build for production

Key Resources:

carbon-design-guide.md - Quick reference for Carbon components
components/ProductionShellTemplate.jsx - Enterprise shell with header, side nav, breadcrumbs
styles/SharedStyles.scss - Reusable styles, utilities, animations

Essential Patterns:

MUST wrap app with Theme component: <Theme theme="g100"><App /></Theme>
Always use Carbon Grid: <Grid fullWidth><Column lg={16}>
Use design tokens: var(--cds-text-primary), $spacing-05
Follow ProductionShell pattern for consistent navigation
Add loading states: <Loading description="Loading..." />
Handle errors: <InlineNotification kind="error" />

Common Issues:

White background on dark theme: Missing Theme component wrapper - add <Theme theme="g100"> around app
Hamburger menu not visible: Add .cds--header__menu-toggle { display: flex !important; }
Styles not loading: Verify SCSS imports order (themes → theme → react)
Components not rendering: Check imports and exports match
Menu not auto-closing: Pass onClickSideNavExpand to navigation handlers (see app-capabilities.md)
Theme not applying: Ensure both SCSS config AND Theme component wrapper are present

Application Reference: See app-capabilities.md for complete feature list, navigation structure, and recent implementations including the menu auto-close fix.

Mehr aus diesem Repository

gleiches Repository

ibmcloud-cli

ibm-self-serve-assets/building-blocks

Use this skill to learn hot to use the IBM Cloud CLI (`ibmcloud`) commands, flags, command patterns, or troubleshooting guidance. Covers core CLI workflows: install/verify/update, login with SSO or API keys, select account/region/resource group targets, inspect and configure CLI output, manage plug-ins (e.g. `vpc-infrastructure` / `ibmcloud is ...` for VPC infrastructure.).

2026-06-3022

agent-voice-configuration

ibm-self-serve-assets/building-blocks

Build voice-enabled agents in watsonx Orchestrate using the ADK. This guide covers initial setup, key concepts for building your first voice agent.

2026-06-1722

automated-resource-mgmt-turbonomic

ibm-self-serve-assets/building-blocks

Reusable skills for the Turbonomic Resource Dashboard project. Each skill is a specialized workflow that Bob can activate to help with specific development tasks.

2026-06-1722

automated-resource-mgmt-turbonomic

ibm-self-serve-assets/building-blocks

Deploy and manage HashiCorp Vault using Ansible automation with proper configuration, permissions, and security setup.

2026-06-1722

agent-ops

ibm-self-serve-assets/building-blocks

Plan and run evaluations, red-teaming, and runtime observability for watsonx Orchestrate (WXO) agents across Developer Edition and SaaS. Use when validating WXO agents pre-deploy, authoring benchmark JSON DAGs, interpreting Journey Success / Tool Call Recall / Agent Routing F1 / RAG Faithfulness, diagnosing agent failures, running adversarial red-teaming (Instruction Override, Jailbreaking, Crescendo Attack), searching runtime traces, exporting traces via the Python SDK, wiring Langfuse for cost & latency analysis, or registering model pricing in Langfuse. Interview-first; emits bash commands for the user to run in their IDE terminal.

2026-06-1222

build-time-gen-ai-evals

ibm-self-serve-assets/building-blocks

Evaluate GenAI applications — RAG pipelines, LLM/chatbot outputs, and AI agents with tool-calling — before deployment using IBM watsonx.governance metrics. Use when scoring RAG faithfulness / answer relevance / context relevance / retrieval precision, screening LLM outputs for HAP / PII / social bias / jailbreak / prompt safety risk, evaluating agentic tool-call accuracy / parameter accuracy / relevance / syntactic validity, authoring custom LLM-as-judge metrics (criteria_judge or prompt_template styles) for domain-specific concerns, preparing eval datasets in the watsonx-gov SDK format, interpreting results against pass/fail thresholds, or producing prioritized [CRITICAL]/[WARNING]/[INFO] recommendations. Partners install `ibm-watsonx-gov[metrics,agentic,tools,llmaj]` directly and call the SDK in-process; no MCP server, no hosted dependency.

2026-06-1222

name	frontend-development
description	Build enterprise-grade React applications with IBM Carbon Design System, including reusable components and responsive design patterns

Build React applications with IBM Carbon Design System:

Key Resources:

carbon-design-guide.md - Quick reference for Carbon components
components/ProductionShellTemplate.jsx - Enterprise shell with header, side nav, breadcrumbs
styles/SharedStyles.scss - Reusable styles, utilities, animations

Essential Patterns:

MUST wrap app with Theme component: <Theme theme="g100"><App /></Theme>
Always use Carbon Grid: <Grid fullWidth><Column lg={16}>
Use design tokens: var(--cds-text-primary), $spacing-05
Follow ProductionShell pattern for consistent navigation
Add loading states: <Loading description="Loading..." />
Handle errors: <InlineNotification kind="error" />

Common Issues:

White background on dark theme: Missing Theme component wrapper - add <Theme theme="g100"> around app
Hamburger menu not visible: Add .cds--header__menu-toggle { display: flex !important; }
Styles not loading: Verify SCSS imports order (themes → theme → react)
Components not rendering: Check imports and exports match
Menu not auto-closing: Pass onClickSideNavExpand to navigation handlers (see app-capabilities.md)
Theme not applying: Ensure both SCSS config AND Theme component wrapper are present

Application Reference: See app-capabilities.md for complete feature list, navigation structure, and recent implementations including the menu auto-close fix.