L31. Claude: useful connections and commands

Improve a copy of the website’s menu with a Claude Code plugin, then check the result. Allow about 45–60 minutes. We will also examine optional connectors for finding your materials and reviewing a cover, and create a short project instruction file.

For the workshop, you need Windows, Claude Desktop with access to Code, and Documents\AI-practice\personal-site from lesson 12. The official Code guide lists Pro, Max, Team or Enterprise access. Ordinary Claude chat and the Code tab are different working environments. [B301]

In class

The teacher will select a local copy and review a CSS-edit permission request. Together, we will compare the file changes with the menu and choose manual checks.

Three tools for three jobs

frontend-design is a Claude Code plugin containing an interface-design skill. It appears in Anthropic’s official marketplace. With Code access and local project files, it can help adjust spacing and layout. We will install it below and check a small CSS change; no separate design service is required. [B304]

Google Drive is a connector to your Google account’s files. Google’s official connector in the Claude directory can find and read documents; it also includes writing tools. For our exercise, you need a connected account and your own document named Olena-video-brief. Ask: “Find Olena-video-brief in Google Drive. List its topic, duration and all shots, with a link to the document. Change nothing.” Open the original to check the answer: does it actually describe a 30–45-second video about tidying a desk? [B305]

Canva is a connector for designs, not a CSS plugin. It works with Canva designs and requires a Canva sign-in. Canva says its connector is available on Free as well as other plans; some features depend on the plan. Start with a cover you already own: “Find my Desk-video-cover design. Read its heading and suggest a shorter English title. Do not edit the design yet.” Expect a link to the correct design, its current wording and a separate suggestion. Open the design and compare. [B306][B307]

Drive and Canva are optional exercises using existing materials. Replace the sample names Olena-video-brief and Desk-video-cover with your own Drive script and Canva cover names. Earlier lessons did not create files with those names. Skip these exercises if you have no such materials.

[[VIS:b6_claude_routes]]

Workshop: make the navigation easier to use

1. Prepare a separate copy

In File Explorer, open Documents\AI-practice. Copy personal-site using Ctrl+C, Ctrl+V, and name the copy personal-site-claude. Add -2 if that name is taken. Open its index.html in a browser and locate the three menu links.

In Claude Desktop, open Code and a new session. Under the prompt box, select an environment in Local, then the folder control → Open folder…. Choose your copy. Check that the path points to your actual copy: personal-site-claude or personal-site-claude-2. [B301]

Choose Manual to review proposed changes. Leave Worktree, a separate Git working copy, off: we already made our copy. [B302]

2. Install the official plugin

Choose + beside the prompt → Add plugins. If you see Plugins, use Plugins → Browse plugins. Find frontend-design, open its card and check the official marketplace name, claude-plugins-official. Review the package contents, select installation for yourself, the user scope, and confirm installation. [B303][B304]

Wait for completion. Type / in the session’s input, find the frontend-design skill and select it. After the selected skill, paste the request below into Code. Here, “selectors” means the patterns CSS uses to find the menu elements. [B302]

> [PROMPT]

> In this copy of Olena’s personal website, improve only the navigation through styles.css. Preserve the HTML, wording, colours and link underlines. Increase the menu links’ inner spacing so they are easier to click. On a narrow screen, the menu must wrap rather than be clipped. Keep a visible keyboard-focus outline. No libraries, external fonts, animations or publication. First identify the existing menu selectors, then propose a minimal change. Finish with the file path and three manual checks.

Press Enter to send. Expect Claude to inspect the files and identify the existing menu elements. If it describes another project, use the stop button and check the selected folder. [B302]

3. Compare the changes and the page

In the approval request, inspect the path to styles.css and the proposed change. Here, padding means space between a link’s text and the edge of its clickable area. Increasing that space should make clicking easier. Approve a change that matches the brief. Afterwards, select the added/deleted-line indicator to open the diff, a comparison of the old and new content. [B301]

In the diff, check that the HTML is unchanged and no libraries were added.

Reload the page from your personal-site-claude copy or its numbered variant. Expect more space around the link text. Click “Projects”: the address should end in #projects. Narrow the window: all three menu items should remain available. Press Tab: each link should receive a visible outline. Use Notepad to create review.txt inside this copy and record your actual results.

4. Disable what you no longer need

Under + → Plugins → Manage plugins, find the installed package and disable or uninstall it. This stops the plugin’s use; the edited CSS remains on disk. To restore the original appearance, copy styles.css from the unchanged main folder into the practice copy and reload. [B302]

> [FIX]

> Missing the skill after installation? Check the package name, local environment and package status in Manage plugins. Start a new local session in the same folder. This plugin-browser route does not work in cloud or WSL sessions. Do not substitute a similarly named, unfamiliar package. [B302]

Leave the project a short instruction file

To avoid repeating the project’s limits in each session, use Notepad to create CLAUDE.md beside index.html in the practice copy. Press Ctrl+Shift+S (Save As), enter CLAUDE.md, set the file type to All files and encoding to UTF-8, then choose Save. This is a project instruction file, not a plugin installation. Claude Code reads it when starting a session. [B311]

This is Olena's practice website.
Content: index.html. Styling: styles.css.
Keep the language and three page sections.
Do not add libraries or publish anything.
After editing, name the file and a manual check.

Start a new session in this folder. Send: “Read CLAUDE.md. Name the website files and one menu check; change nothing yet.” Compare the reply with the folder. Keep the note current; it does not replace environment permissions.

Connect Drive or Canva

For these optional exercises, use ordinary Claude Desktop chat. Find the service in the connections area, open its card, choose Connect or Install, sign in to the correct account and review the requested access. Enable the service for the conversation and send its prompt from the start of this lesson. An organisation may require an administrator to enable a connector first. [B308]

As checked on 30 October 2026, menu names are changing: the gradual move to a unified Plugins page began on 29 October. If it has not reached you, use Customize → Connectors; in the new view, use the connector filter. Afterwards, disconnect the service on its card. Removing a plugin package does not necessarily disconnect a connector bundled with it; check that connection separately. [B312]

If Drive cannot find your brief, check its name and the signed-in account. If Canva returns another design, add the correct link to your follow-up.

Commands for readers who already use the CLI

This reference is optional. The CLI is Claude Code in a terminal; Desktop does not install the claude command for PowerShell. If your CLI is already configured, open the practice folder in File Explorer, type powershell in its address bar and press Enter. In PowerShell, type claude and press Enter. Enter the following lines in the Claude Code CLI input, one at a time, followed by Enter. [B301]

| Where | Enter | Check the result |

| --- | --- | --- |

| Code CLI | /help | Help opens. |

| Code CLI | /context | Context usage appears. |

| Code CLI | /compact Keep the goal and checks | Conversation is summarised. |

| Code CLI | /plan Inspect the menu without edits | A plan is prepared. |

| Code CLI | /diff | Available working-file changes appear. |

| Code CLI | /plugin | Plugin browser opens. |

| Code CLI | /mcp | MCP connection status appears. |

| Code CLI | /permissions | Permission rules appear. |

| Code CLI | /goal | Current goal status appears. |

| Code CLI | /goal clear | Active goal is removed. |

These names were checked against the official reference. If a command is unknown, check your version and /help; do not assume it belongs in ordinary web chat. /diff needs an available comparison: a folder without Git history may lack the baseline you want. [B309]

To set a goal, put a condition after /goal, for example: “Check the three menu links in index.html. Report each href and its matching id. Change no files. Finish after the report or two turns.” The command starts work, with an evaluator checking completion between turns. It grants no extra permissions. A turn limit written in the condition is not a hard spending cap. To end the goal, use /goal clear; this does not undo completed edits. [B310]

Home practice

• Use your video-cover text. If Canva is already connected, ask Claude to read it with a design link and suggest two shorter versions of up to five words without editing.
• Without connections, use Notepad: write “How I tidy my desk before studying” and create two shorter versions of up to five words yourself.
• Save the original, alternatives and chosen title in Documents\AI-practice\cover-home.txt. Explain your choice in one sentence. Success means a shorter title that still describes desk tidying, with no design changes.

Self-test

• You need to read a Google Drive document, but only frontend-design is installed. What is missing?
• The plugin is disabled, but the menu remains larger. Is this a fault, and how can you restore the earlier appearance?
• Claude reports a video’s topic and duration. What else must you check to confirm it used the intended brief?

Terms

• Installation scope: where a plugin applies: your user settings on this computer, or a project.
• Skill: instructions for a recurring type of work.
• Diff: a comparison of earlier and later content.
• CLAUDE.md: a persistent project instruction file for Claude Code.