openshell-dashboard: Skill for Claude Code

Add Page

Add a new page to the dashboard frontend.

Arguments

$ARGUMENTS — Page name and description (e.g., "sandbox detail page showing overview, logs, and connect tabs")

Steps

1. Create the page component

Pages are flat files in frontend/src/pages/ (no subdirectories):

frontend/src/pages/<PageName>.tsx

Rules:

• Self-contained: takes props, loads its data through the src/api/ hooks
• PatternFly 6 components only
• UI text through useI18n from ../i18n, with the keys in a catalog under frontend/src/i18n/locales/en/ (see frontend/src/i18n/README.md)
• Export as default
• Use relative imports (not ~/ alias)

For example, a page that shows one sandbox template:

import {
  Alert,
  Bullseye,
  PageSection,
  Spinner,
  Title,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';

import { useTemplate } from '../api/templates';
import { useI18n } from '../i18n';

type TemplateDetailPageProps = {
  workspace: string;
  templateName: string;
};

const TemplateDetailPage: React.FC<TemplateDetailPageProps> = ({
  workspace,
  templateName,
}) => {
  const { t } = useI18n('workspaces');
  const template = useTemplate(workspace, templateName);

  if (template.isLoading) {
    return (
      <Bullseye>
        <Spinner aria-label={t('template.loading')} />
      </Bullseye>
    );
  }
  if (template.isError) {
    return (
      <Alert variant="danger" title={t('template.loadFailed')}>
        {(template.error as Error).message}
      </Alert>
    );
  }

  return (
    <PageSection>
      <Title headingLevel="h1" data-testid="template-name">
        {templateName}
      </Title>
      <Link to={`/workspaces/${workspace}`}>
        {t('template.backToWorkspace')}
      </Link>
    </PageSection>
  );
};

export default TemplateDetailPage;

The three template.* keys are new: add them to the catalog the page reads, here frontend/src/i18n/locales/en/workspaces.ts.

Key patterns:

• Navigate with <Link>; use useNavigate only for a redirect after an action
• data-testid on interactive elements
• No breadcrumbs in pages — the app shell adds its own