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

frontend-development

스타22

포크10

업데이트2026년 5월 29일 10:54

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

설치

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

Manus에서 실행

출처

ibm-self-serve-assets

ibm-self-serve-assets/building-blocks

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

다운로드

Manus에서 실행

관련 직업SOC

SOC 직업 분류 기준

소프트웨어 개발자컴퓨터 및 수학직·SOC 15-1252

파일 탐색기

5 개 파일

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.

이 저장소의 다른 Skills

같은 저장소

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.